Loading Screen

Last Edited: 2009-04-15

A loading screen script built using JavaScript and CSS. This script displays a loading screen covering the visible area of the web page until the web page has finished loading, when the web page is then made visible to the user.

Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>Loading Screen Script</title> <meta name="title" content="Loading Screen Script" /> <meta name="author" content="Programmer Central" /> <meta http-equiv="Content-Type" content="text/html; charset='UTF-8'" /> <script type="text/javascript"> (function() { if (window.addEventListener) { window.addEventListener("load", hide_loading_screen, false); } else { window.attachEvent("onload", hide_loading_screen); } })(); function display_loading_screen() { document.getElementById("loading_screen").style.display = 'block'; } function hide_loading_screen() { document.getElementById("loading_screen").style.display = 'none'; } </script> <style type="text/css"> #loading_screen { display: none; position: absolute; left: 0px; top: 0px; height: 100%; width: 100%; background-color: black; color: white; text-align: center; padding-top: 100px; } </style> </head> <body> <div id="loading_screen"> <h1>Loading...</h1> <h3>Please Wait...</h3> </div> <script type="text/javascript">display_loading_screen();</script> <h1>Loading Screen Script</h1> <p>Below are two large images so that you can see the loading screen in action.</p> <p>Image: <a href="http://www.freedigitalphotos.net">FreeDigitalPhotos.net</a> <img src="images/loadingscreen/image1.PNG" alt="Example Image 1" /></p> <p>Image: <a href="http://www.freedigitalphotos.net">FreeDigitalPhotos.net</a> <img src="images/loadingscreen/image2.PNG" alt="Example Image 2" /></p> </body> </html>

The preview will open up in a new window.

Information

If you use this script on any of your web pages then please provide a link back to us.

More free JavaScript Background Effects scripts.

Rate This Script

Rate this script!

Rate This Script
	Excellent!
	Very Good
	Good
	Fair
	Poor

Be Sure To Check Out These Scripts
CSS/JavaScript Drop Down Menu	A horizontal drop down menu script which uses Javascript and CSS. When the mouse pointer is moved over a link a further set of links is revealed.
PHP Directory List	Displays a list of all files and directories in a directory.

Top of Page

Programmer Central

Free Web Related Scripts, Tutorials, and Generators.

Search

Links

Font Size

Random Script

Support Us

Loading Screen

Code

Information

Rate This Script