Transparent Loading Screen

Last Edited: 2009-04-15

Transparent Loading Screen * Visit Publisher Site A transparent loading screen script built using JavaScript and CSS. This script displays a transparent 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>Transparent Loading Screen Script</title> <meta name="title" content="Transparent 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; opacity: 0.5; filter: alpha(opacity=50); } </style> </head> <body> <div id="loading_screen"> <h1>Loading...</h1> <h3>Please Wait...</h3> </div> <script type="text/javascript">display_loading_screen();</script> <h1>Transparent 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
	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

Transparent Loading Screen

Code

Information

Rate This Script