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

I thought this post will be very useful to user who want to do same like this.

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!

View Live Demo Download

If you enjoyed this article, Get email updates (It’s Free)
http://w3lessons.info/wp-content/uploads/2014/01/Ajax-Loading-Indicator-using-jQuery.pnghttp://w3lessons.info/wp-content/uploads/2014/01/Ajax-Loading-Indicator-using-jQuery-150x150.pngKarthikeyan KFreebiesjqueryWeb Design
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 websitesI...