How To: Create a Simple Visual “Loading” Effect

If you've got a script that takes a while to load and want to make your user aware that everything is alright, then this tool is for you. The idea is simple – display the message before the labor intensive part of the script runs, and then using CSS after the labor intensive part of the script, hide the message. If you're using a language that provides a buffer (ASP for instance), make sure you turn the buffer off first, or this won't have any effect. (eg. Response.Buffer = False) Example (See it in action):

<?php
ini_set('implicit_flush', 'on');

echo '<p id="loading_msg"><img src="http://img520.imageshack.us/img520/4950/loadingvp7.gif" alt="" style="vertical-align: middle;" /> Loading...</p>';

// Code that takes forever here, could of course be any language
sleep(5); // Only for demonstration

echo '<script type="text/javascript">
window.onload = init;

function init() {
	document.getElementById("loading_msg").style.display = "none";
}
</script>';
echo '<p>Woohoo, five seconds passed.</p>';

require_once('includes/trackers.inc.php');
?>

Bookmark this page