Showing a spinner during an AJAX request?

Question

Hi,

what is the best way to show a spinner?

I have prepared a div(id="spinner"), that should be visible during loading.

Best regards

Answer 1

Do you use jQuery?

If so you can use:

ajaxStart & ajaxStop: http://docs.jquery.com/Ajax

For example:

$(function(){

// hide it first
$("#spinner").hide();

// when an ajax request starts, show spinner
$.ajaxStart(function(){
    $("#spinner").show();
});

// when an ajax request complets, hide spinner    
$.ajaxStop(function(){
    $("#spinner").hide();
});

});

You can fine tune a little with a request counter that increments and decrements in case you have a lot of simultaneous requests.

If you don't use jQuery, check out the jQuery Source code for which events ajaxStart actually register in plain old javascript.

HTH Alex

Answer 2

$().ajaxSend(function(r, s) {
    $("#spinner").show();
});

$().ajaxStop(function(r, s) {
    $("#spinner").fadeOut("fast");
});