javascript - How to display a "busy" indicator with jQuery?

Question

How do I display a spinning "busy" indicator at a specific point in a web page?

I want to start/stop the indicator when an Ajax request commences/completes.

Is it really just a matter of showing/hiding an animated gif, or is there a more elegant solution?

Answer 1

You can just show / hide a gif, but you can also embed that to ajaxSetup, so it's called on every ajax request.

$.ajaxSetup({
    beforeSend:function(){
        // show gif here, eg:
        $("#loading").show();
    },
    complete:function(){
        // hide gif here, eg:
        $("#loading").hide();
    }
});

One note is that if you want to do an specific ajax request without having the loading spinner, you can do it like this:

$.ajax({
   global: false,
   // stuff
});

That way the previous $.ajaxSetup we did will not affect the request with global: false.

More details available at: http://api.jquery.com/jQuery.ajaxSetup