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.

/home/dhaswin/Downloads/how to show loading image in ajax jquery

 

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!

You May Also Like

Never Miss Any Web Tutorials, Guides, Tips and Free eBooks

Join Our Community Of 50,000+ Web Lovers and get a weekly newsletter in your inbox

 

I hate spam too. Unsubscribe at any time.

13 thoughts on “how to show loading image in ajax request using jquery?”

  1. 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 🙂

    Reply

Leave a Comment