Show loading page using jquery ajax

Some times the ajax request takes time to fetch data from server, in such cases it is always suggested to show a spinner or a loading page using jquery ajax to the user. In this article we will learn to show loading page on an Ajax call using jQuery.

Html Code

Add a div and hide it using “display:none”


<div id="processingDiv" class="overlay" style="display: none;"></div>

1 2	<div id="processingDiv" class="overlay" style="display: none;"></div>

Css Code

Add css to the above div so that it can be displayed over the existing content of the body

.overlay{
position: absolute;
width: 100%;
height: 100%;
z-index: 10;
background: url(spinner.gif) 50% 50% no-repeat #ede9df;
}

.overlay{

position: absolute;

width: 100%;

height: 100%;

z-index: 10;

background: url(spinner.gif) 50% 50% no-repeat #ede9df;

}

jQuery Code

The below code will perform a ajax call to the server.
We need to make the div that we had added earlier visible just before the ajax call.
Once the ajax call is completed the div needs to be hidden again.

$("#ajaxBtn").click(function(){
      $("#processingDiv").show();
      $.ajax({url:"ajaxloadingPage.txt",success:function(result){
         $("#processingDiv").fadeOut(5000);
         $("#ajaxDataDiv").html(result);
      }});
});

$("#ajaxBtn").click(function(){

$("#processingDiv").show();

$.ajax({url:"ajaxloadingPage.txt",success:function(result){

$("#processingDiv").fadeOut(5000);

$("#ajaxDataDiv").html(result);

}});

});

loading page using jquery ajax — Image – Loading page using jquery ajax

View Demo

Please do let me know if you need any more info in this or any articles available on this site.