Friday, June 14, 2013

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..." />

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

//call function

 function do_something()

  var request = $.ajax({
  url: "your_url",
  type: "POST",
  data: {name : "name"},
  dataType: "json"

 request.done(function(msg) {
   alert( "Data Saved: " + msg );
});, textStatus) {
   alert( "Request failed: " + textStatus );



  1. This comment has been removed by the author.

  2. I want to keep it at common place. So that every time any ajax request goes, it should show loader and once response comes, it should hide loader. So that I don't have to write $("#loading").show(); and $("#loading").hind(); in every ajax call.