Browse > Home / Tutorial / A simple way to put a page loading message for slow loading pages.


A simple way to put a page loading message for slow loading pages.

July 16, 2010

This came around from me answering a question on Experts Exchange. I had solved this some time ago for myself. But someone else needed some help so I gave them my example. If you ever need a simple loader for pages and don’t want to use jscript or any of that nonsense. You can use my example.

The solution i found is pretty simple. It involves placing a div that covers the entire page at loading time. Then after your page finishes executing we hide the div. See easy.

/// put this at the top of the page
<div id="loading" style="display: ;">
	<div id="loadingtext">Please wait...<br /><img src="images/ajax-loader.gif" border="0" /></div>
</div>

////////////////////
Your content or scripts go here
////////put this right before the end of the page
<script type="text/javascript">
	document.getElementById("loading").style.display = "none";
</script>
And here is the css that makes it all possible.

#loading {
 position: fixed;
 left: 0;
 top: 0;
 bottom: 0;
 width: 100%;
 height: 100%;
 min-height: 100%;
 background-color: white;
 text-align: center;
 filter:alpha(opacity=50);
}
#loadingtext {
 width: 100px;
 height: 100px;
 background-color: #FFF;
 text-align: center; 
 padding: 100px 0 0 0;
 margin: 250px auto 0 auto;
}

here you can get a nice loading image for your site.
http://ajaxload.info
good luck.

Written by grey580 · Filed Under Tutorial 

Got something to say?

You must be logged in to post a comment.