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


FF1+ IE5+ Opr7+

Event-based Progress Bar

Note: Modified by DD so methods incr/decrCount() accepts any percentage (rather than just 1%)

Description: This is an event-based progress bar which you can add to existing scripts that require graphical representation. Using 3 pre-exposed methods, you control precisely when it loads and by how much each time:

  • incrCount(percent_value) - This increments the current percent value by percent_value
  • decrCount(percent_value) - This decrements the current percent value by percent_value
  • setCount(percent_value) - This sets the current percent value to whatever percent_value you specify; 0 to 100.

Call the above methods as you would with any JavaScript method and in any context.

Demo:

- Add 5% ( incrCount(5) )
- Minus 5% ( decrCount(5) )
- Set to 0% ( setCount(0) )
- Set to 25% ( setCount(25) )
- Set to 50% ( setCount(50) )
- Set to 75% ( setCount(75) )
- Set to 100% ( setCount(100) )

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:

percent_bar.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 percent_bar.js using any text editor, such as Notepad.

Progressing the progress bar

As mentioned, to increment/decrement the progress bar, you would invoke one of the 3 methods listed above. Here are a couple of examples:

<a href="javascript:incrCount(5)">Increase bar by 5%</a>

<script type="text/javascript">
incrCount(50) //set bar to 50%
</script>