How to display processing during Ajax request processing using jQuery

Goal

User interaction is very crucial. When you are making ajax calls to the server and response takes some time your webpage looks like hanged and user is clueless so as to what is happening. So it is a good approach to show some animated icon on the page during the request processing so that user can understand that the precessing is in progress.

On to the code.....

First, create an Ajax icon using the AjaxLoad site.

Then add the following to your HTML:

<img src="/images/loading.gif" id="loading-indicator" style="display:none" />

And the following to your CSS file:

#loading-indicator {
  position: absolute;
  left: 10px;
  top: 10px;
}

Lastly, you need to hook into the Ajax events that jQuery provides; one event handler for when the Ajax request begins, and one for when it ends:

$(document).ajaxSend(function(event, request, settings) {
  $('#loading-indicator').show();
});

$(document).ajaxComplete(function(event, request, settings) {
  $('#loading-indicator').hide();
});

Taken from source.