how to show loading image in ajax request using jquery?

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

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.

jQuery Code to Show Loading Image When Post Request is In Progress

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 Hide the Loading Image When Post Request is Completed

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 feedback are always welcome!

Thanks!