Loading overlay before page complete load

Place the below code at the top of  your respective page and copy image to your image folder.
Then load your page again.


<style>
 .progress-indicator {
   top:0;
   right:0;
   width:100%;
   height:100%;
   position:fixed;
   text-align:center;
   /* IE filter */
   filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
   -moz-opacity:1.0;    /* Mozilla extension */
   -khtml-opacity:1.0;  /* Safari/Conqueror extension */
   opacity:1.0; /* CSS3 */
   z-index:1000;
   background-color:white;
   display:none;
 }

 .progress-indicator img {
   margin-top:150px;
 }
 .progress-indicator h1 {
   font-size:16px;
   font-weight:bold;
   margin-top:50px;
 }
</style>

<div class="progress-indicator">
   <img src="/images/icon_loading_75x75.gif'" alt="" />
   <h1>Loading.....</h1>
</div>

<script>
jQuery(document).ready(function() {
    jQuery('.progress-indicator').show();
    jQuery(window).load(function() { jQuery('.progress-indicator').hide(); });
});
</script>