How to add html page loading message

First right after the body tag add this:

 <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: 100px; left: 240px; z-index: 100; }

And finally add this javascript to your page (preferably at the end of your page, before closing body tag of course):

 <script language="javascript" type="text/javascript"> $(window).load(function() { $('#loading').hide(); }); </script>

Then adjust the position of the loading image and the background color of the loading div via the style class.

This is it, works just fine. But of course you have to have an ajax-loader.gif somewhere.

Try AJAXLoad They have some great animated GIF’s there.. 🙂