Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Showing a spinner during an AJAX request?

what is the best way to show a spinner?

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

like image 362
brainfck Avatar asked Oct 02 '09 11:10

brainfck


3 Answers

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

like image 125
Alex Duggleby Avatar answered Oct 15 '22 15:10

Alex Duggleby


I used this in my rails app. This worked for me:

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


$(document).ajaxStop(function(r, s) {
$("#spinner").fadeOut("fast");});
like image 32
Sudhakar Avatar answered Oct 15 '22 13:10

Sudhakar


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

$().ajaxStop(function(r, s) {
    $("#spinner").fadeOut("fast");
});
like image 33
Tony Borf Avatar answered Oct 15 '22 13:10

Tony Borf