Jquery Ajax Loading Indicator

Here is a bit of code that monitors all ajax calls on your page, and displays an animated gif, when ajax is called.

Animated Loader image.




$("#dhhNavHeader").append('<div id="ajaxBusy"><p><img src="../images/loading.gif"></p></div>');

$('#ajaxBusy').css({
display:"none",
margin:"0px",
paddingLeft:"0px",
paddingRight:"0px",
paddingTop:"0px",
paddingBottom:"0px",
width:"auto"
});

// Ajax activity indicator bound
// to ajax start/stop document events
$(document).ajaxStart(function(){
$('#ajaxBusy').show();
}).ajaxStop(function(){
$('#ajaxBusy').hide();
});