Show Ajax Loader Icon Until Rendering Is Finished Using Jquery

Add the next html code within torso tag:

<div id="loading">   <img id="loading-image" src="images/ajax-loader.gif" alt="Add the next html code within torso tag Show ajax loader icon until rendering is finished using Jquery" /> </div> 

Then add together the means flat for the div as well as icon to your css:

#loading {   width: 100%;   height: 100%;   top: 0px;   left: 0px;   position: fixed;   display: block;   opacity: 0.7;   background-color: #fff;   z-index: 99;   text-align: center; }  #loading-image {   position: absolute;   top: 50%;   left: 50%;   z-index: 100; } 

And in conclusion add together this jquery to your page within whatsoever function

 $(document).ready(function() { //hide on get-go  $('#loading').hide();  //call share do_something();    function do_something()  {   $("#loading").show();    var asking = $.ajax({   url: "your_url",   type: "POST",   data: {name : "name"},   dataType: "json"  });   request.done(function(msg) {  $("#loading").hide();    alert( "Data Saved: " + msg ); });   request.fail(function(jqXHR, textStatus) {  $("#loading").hide();    alert( "Request failed: " + textStatus );  });  }  }); 

Sumber http://developer-paradize.blogspot.com