Showing Busy loading Indicator during an AJAX Request using jQuery

Last modified on by Karthikeyan K

In this post I am going to discuss how to show a busy loading indicator during Ajax call.

Recently, when I was developing one cool project, I needed a progress indicator to show the user that something was happening in the background.

Previously I had written simple jQuery preloader for websites and it was working very well in all browsers

I thought this post will be very useful to improve their website user experience.

Busy Loading Indicator using jQuery

jQuery Code to Ajax Indicator Start

The below function ajaxindicatorstart() is to show the busy loading indicator while ajax request starts anywhere in the body. Parameter is used to show the text below loading image.

	function ajaxindicatorstart(text)
{
if(jQuery('body').find('#resultLoading').attr('id') != 'resultLoading'){
jQuery('body').append('<div id="resultLoading" style="display:none"><div><img src="ajax-loader.gif"><div>'+text+'</div></div><div class="bg"></div></div>');
}

jQuery('#resultLoading').css({
'width':'100%',
'height':'100%',
'position':'fixed',
'z-index':'10000000',
'top':'0',
'left':'0',
'right':'0',
'bottom':'0',
'margin':'auto'
});

jQuery('#resultLoading .bg').css({
'background':'#000000',
'opacity':'0.7',
'width':'100%',
'height':'100%',
'position':'absolute',
'top':'0'
});

jQuery('#resultLoading>div:first').css({
'width': '250px',
'height':'75px',
'text-align': 'center',
'position': 'fixed',
'top':'0',
'left':'0',
'right':'0',
'bottom':'0',
'margin':'auto',
'font-size':'16px',
'z-index':'10',
'color':'#ffffff'

});

jQuery('#resultLoading .bg').height('100%');
jQuery('#resultLoading').fadeIn(300);
jQuery('body').css('cursor', 'wait');
}

jQuery Code to Ajax Indicator Stop

The below function ajaxindicatorstop() is used to hide the busy loading indicator while ajax request stops anywhere in the body.

	function ajaxindicatorstop()
{
jQuery('#resultLoading .bg').height('100%');
jQuery('#resultLoading').fadeOut(300);
jQuery('body').css('cursor', 'default');
}

The below jQuery code will trigger the ajax start & stop function in the document. More details available at: http://api.jquery.com/jQuery.ajaxSetup

  jQuery(document).ajaxStart(function () {
//show ajax indicator
ajaxindicatorstart('loading data.. please wait..');
}).ajaxStop(function () {
//hide ajax indicator
ajaxindicatorstop();
});

If you want to do an specific ajax request without having the loading indicator, you can do it like this by setting global:false

jQuery.ajax({
global: false,
// ajax stuff
});

I hope you will like this tutorial. You can use this code in your live projects.

Please don’t forget to share and subscribe to latest updates of the blog. Comments and feedbacks are always welcome!

Thanks!

You May Also Like

12 Responses

  1. siddhu says:

    Waiting for this … Thanq Karthi

  2. Rony says:

    i used this code but nathing to happen,plz any one can help me to use this code in proper way

  3. vel says:

    it’s not working, give proper file

  4. Harish says:

    It Works for Me Thanks Karthikeyan K but it works for mvc 2?????plz Revert back….

  5. Ganesan K says:

    Hi Karthik, Image was not appearing in div, text content alone appearing. looking for your suggestion.

  6. Ashik Ajith says:

    Thanks Buddy Worked perfectly !!! My suggestion is why can’t add css styling in the global.css or somewhere for the div instead of adding through jQuery as per the coding conventions. Any way stuff helped a lot for me 🙂

  7. Christos says:

    I have a problem running this with chrome and safari. All other browsers work fine.

  8. Rahul Shetty says:

    Awesome. Amazing tutorial.

  9. Deovrat Jalgaonkar says:

    Awesome Tutorial. Thank You Very Much!!!!!!!

  10. I have 3 AJAX calls how can i change different gif image for different ajax calls?

Leave a Reply

Your email address will not be published. Required fields are marked *