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):

<p id="loading_msg"><img src="http://img520.imageshack.us/img520/4950/loadingvp7.gif" alt="" style="vertical-align: middle;" /> Loading...</p>
<?php
// Code that takes forever here, could of course be any language
sleep(5); // Only for demonstration
?>
<style type="text/css">#loading_msg { display: none; }</style>
Woohoo, five seconds passed.

Bookmark this page

Close Bookmark and Share This Page

Save to Browser Favorites / Bookmarks

Email This to a Friend

Copy HTML:

If you like this then please subscribe to the RSS Feed or Email Feed.

This entry was posted on Thursday, July 17th, 2008 at 11:24pm and is filed under How To's. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Random Web Tools

How To: Create a Simple Visual “Loading” Effect

Leave a Reply