Show ajax loader image until rendering is finished using Jquery

Add the following html code inside body tag:

<div id="loading">
  <img id="loading-image" src="images/ajax-loader.gif" alt="Loading..." />
</div>

Then add the style class for the div and image 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 finally add this jquery to your page inside any function

$(document).ready(function() {
//hide on start
 $('#loading').hide();

//call function
do_something();


 function do_something()
 {
  $("#loading").show();

  var request = $.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 );
 });
 }

});