An Ajax loader image is an animated gif that give your users a visual que that your widget is doing something. (Usually fetching data from the server via ajax). It’s very simple to implement one on your ajax site.

Step 1 is to get a suitable animated gif. You can create your own, or just grab one from http://www.ajaxload.info/

Step 2. Create css class, that uses your new gif as a background image. ex

.ui-widget-loading { background: #f5f3e5 url(spinner.gif) 50% no-repeat; top }

Step 3. The jquery. So i assume you are using jquery to perform some sort of ajax call. Simply use the following

 $(this).ajaxStart(function(){
  $(this).removeClass('ui-widget-content');
  $(this).addClass('ui-widget-loading');
 });
                        
  $(this).ajaxStop(function(){
    $(this).removeClass('ui-widget-loading');
    $(this).addClass('ui-widget-content');
  }); 

so the ajax start and stop functions are native jquery handler functions which are triggered when an ajax call starts or stops. so when the ajax call starts we remove the content class and add the loading class, when the call is finished we remove the loading class and replace it with the content.

Happy Coding !!