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.. 🙂

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s