Display Loading image on Partial Page Refresh/Ajax

Continuing from my previous post on displaying the loading symbol on page load, this post I will explain how we can do the same for Partial Page refresh (aka) Ajax.

Add a hidden div 

Add a loading image inside a hidden div somewhere in your page.

<div id="loader" style="display:none">
          <img src="your/image/path/loading.gif" alt="loading..."/>
</div>

Add loading image to Body thro' JavaScript

Add the loading image to body tag using jquery.

$('body').prepend('<div id="loading-image" style="page-loader"/>');
$('#loading-image').html($('#loader').html());

Add CSS for page-loader

.page-loader {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
 }

Add loading image with page mask

If you wish to mask the entire page on displaying the loading image, add the loading image within a div that will acts as page mask and then add that div to the 'body' tag.

$('body').prepend('<div class="pagemask"><div id="loading-image" style="page-loader"/></div>');
$('#loading-image').html($('#loader').html());

add the CSS for page mask 

.page-loader {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background:#fff;
  z-index: 9999;
 }

மகிழ்ச்சியான குறிமுறையாக்கம் !