• Calendars
• Date & Time
• Document Effects
• Dynamic Content
• Form Effects
• Games
• Image Effects
• Links & Tooltips
• Menus & Navigation
• Mouse and Cursor
• Scrollers
• Text Animations
• User/System Preference
• Window and Frames
• Other
• XML and RSS

• Script Forums
• Recommend Us
• Usage Terms
• Free JavaScripts

• IE5+: IE 5 and above
• FF1+: Firefox 1.0+. NS6+ and FF beta are assumed as well.
• Opr7+: Opera 7 and above.

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:

Directions:

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

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>