spin.js spinner not showing

Question

I use spin in a webapplication and it works just fine, but in one case, it doesn't.

Before I make an ajax call, i call the function showLoading();

function showLoading() {


    $('<div id="divSpin"></div>').appendTo(document.body);

    var target = document.getElementById("divSpin");

    var opts = {
        lines: 13, // The number of lines to draw
        length: 20, // The length of each line
        width: 10, // The line thickness
        radius: 30, // The radius of the inner circle
        corners: 1, // Corner roundness (0..1)
        rotate: 8, // The rotation offset
        direction: 1, // 1: clockwise, -1: counterclockwise
        color: '#000', // #rgb or #rrggbb or array of colors
        speed: 1, // Rounds per second
        trail: 60, // Afterglow percentage
        shadow: false, // Whether to render a shadow
        hwaccel: false, // Whether to use hardware acceleration
        className: 'mySpin', // The CSS class to assign to the spinner
        zIndex: 2e9, // The z-index (defaults to 2000000000)
        top: '50%', // Top position relative to parent
        left: '50%' // Left position relative to parent
    };
    if (mySpinner) mySpinner.spin(target);
    else {
        mySpinner = new Spinner(opts).spin(target);
    }
}

in the success function i call the method removeLoading:

  $.ajax({
        type: "POST",
        url: url,
        data: JSON.stringify(jsonObject),
        contentType: "application/json; charset=utf-8",
        dataType: 'json',
        async: async
    }).success(function (data, textStatus, jqXhr) {
        callback(data);
        removeLoading();
    });

in the removeLoading I only call mySpinner.stop();

The spinner is never shown. The ajax call needs some time to be finished (a few seconds) and if I debug with chrome and make a breakpoint, I see the spin is created, even if I set the breakpoint directly in my removeLoading-function the spin is shown.

thx in advance

©a-x-i

Answer 1

I think you can improve a few things first:

1. Your function showLoading defines the options, creates an element on-the-fly, appends it to the body and eventually starts the spinner. I would separate this into two steps:

   1.1. Create a function setupLoading that creates the element, defines the options and sets mySpinner. This function will be called just once, at the beggining.

   1.2. Change showLoading to just mySpinner.spin();

2. You don't show the call to showLoading() so I'm unsure how are you calling the spinner. However, you could use the events ajaxStart and ajaxStop to bind automatically (thus removing removeLoading(); on .success(..).

So, here's your code with this changes (and here's a working jsfiddle):

var mySpinner = null;

function setupLoading() {    
    $('<div id="divSpin" />').appendTo(document.body);

    var target = document.getElementById("divSpin");

    var opts = {
        lines: 13, // The number of lines to draw
        length: 20, // The length of each line
        width: 10, // The line thickness
        radius: 30, // The radius of the inner circle
        corners: 1, // Corner roundness (0..1)
        rotate: 8, // The rotation offset
        direction: 1, // 1: clockwise, -1: counterclockwise
        color: '#000', // #rgb or #rrggbb or array of colors
        speed: 1, // Rounds per second
        trail: 60, // Afterglow percentage
        shadow: false, // Whether to render a shadow
        hwaccel: false, // Whether to use hardware acceleration
        className: 'mySpin', // The CSS class to assign to the spinner
        zIndex: 2e9, // The z-index (defaults to 2000000000)
        top: '50%', // Top position relative to parent
        left: '50%' // Left position relative to parent
    };

    mySpinner = new Spinner(opts).spin(target);
}

function removeLoading(){
    mySpinner.stop();
}

function showLoading() {
    mySpinner.spin();
}

//Setup spinner
setupLoading();

// bind ajax to events
$(document).on('ajaxStart', showLoading);
$(document).on('ajaxStop', removeLoading);

$.ajax({
    type: "POST",
    url: url,
    data: JSON.stringify(jsonObject),
    contentType: "application/json; charset=utf-8",
    dataType: 'json',
    async: async
}).success(function (data, textStatus, jqXhr) {
    callback(data);
});