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