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