This example uses the jQuery JavaScript library.

First, create an Ajax icon using the AjaxLoad site.

Then add the following to your HTML :

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

And the following to your CSS file:

   1  #loading-indicator {
   2    position: absolute;
   3    left: 10px;
   4    top: 10px;
   5  }

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:

   1  $(document).ajaxSend(function(event, request, settings) {
   2    $('#loading-indicator').show();
   3  });
   4  
   5  $(document).ajaxComplete(function(event, request, settings) {
   6    $('#loading-indicator').hide();
   7  });