New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
Bookmark online:

FF1+ IE5+ Opr7+

Time-based Progress Bar

Note: Script replaces "Dynamic Progress bar" by Dynamic Drive

Description: This is a fully customizable "time based" progress bar. Set any duration (ie: 10 seconds) for the script to finish loading the bar. A great script to provide graphical countdown to any action that involves a delay before execution. Here are a few practical examples on using the script:

  • To create a countdown before navigating to a new page
  • To scare your visitors by pretending to, for example, scan or upload their harddrive
  • To create a timer (ie: for use in a quiz or game)

It's your call...

Demo:


Directions: Developer's View

Step 1: Insert the following code in the BODY section of your page

Select All

Step 2: Download the following .js file, and upload to your webpage directory:

timerbar.js (download by right clicking, and selecting "Save As")

You can configure the bar's appearance and post action (ie: navigate to a URL when it's done loading) by editing timerbar.js using any text editor, such as Notepad.