Bookmark to del.icio.us
FF1+ IE5+ Opr7+
WinXP Progress Bar (version 1.2)
Description: A great looking pure DHTML progress bar that resembles the one seen in Window XP's startup screen. All visual aspects of the bar can be customized, and the script can be invoked multiple times to display multiple bars on the same page. Script works in both IE5+ and NS6+.
Note that this script by default doesn't perform any action other than animating the progress bar. It's up to you to create helper functions to accomplish any relevant tasks.
Step 1: Insert the following script in the HEAD section of your page
The above script references an external .js file, which you can download below:
xp_progress.js (download by right clicking, and selecting "Save As")
Be sure to upload this .js file to your web server.
Step 2: Within the BODY of your page where you wish the Progress Bar to appear, add the below script:
That's it! Read on for an explanation of each parameter within function createBar().
Explanation of parameters within createBar()
To customize the look of the progress bar, simply pass in different values into createBar():
var xyz = createBar(width, height, backgroundColor, borderWidth, borderColor, blockColor, scrollSpeed, blockCount, actionCount, actionString)
So for example, by changing the parameter settings, you can display a different looking Progress Bar, and one that executes a function after the Progress Bar has scrolled 3 cycles:
(alert message disabled in actual demo).
Explanation of methods() to control the progress bar
Try clicking the links in the middle column to see how it affects the green Progress Bar.
Just in case you're confused how all this fits together, here's an example that scrolls a Progress Bar for 5 cycles before pausing and redirects to another page: