theworldisgrey

Vista Javascript Progress Bar - Update

So, I was looking for a bit of an challenge to keep me occupied this afternoon. Windows Vista has some UI widgets that are really cool. Looking close at them, they are acutaly rather complicated. Quite a departure from the simple widgets of previous versions. I set out to try to de-construct the Windows Vista progress bar, and reconstruct it as a Javascript widget. This is what I came up with:

While quite close, its does have some limitations. Width can be given any dimension (though at least 75px width will limit any image overlap, but height is static at 16px. It generally looks best on a white or a light gray background.

Installation

To begin using it:

• Include the JS and CSS file within the head of the document. Body works too if your using it within a CMS. Just include it before you actually use it.
• Add a div with a unique id, where you want the progress bar to show.
• Instance the VistaProgressBar class afterwards with the settings you want.
• You can update the progress bar using the addProgress() and setProgress() methods for determinate mode or start() and stop() for indeterminate mode.

For more detail, please read the readme included with the download.

Examples

Basic progress bar, no smooth animation and no highlight.

Progress bar with a very slow moving highlight.

Indeterminate Mode

Download

You can download a zip file containing the files for version 0.6 here:

Current Version

• Download Version 0.6

Older Versions

• Download Version 0.5

Support

No support is provided with this script. If you find bugs, do let me know. If you are going to use it, its best you know a thing or two about Javascript.

I have tested it in following browsers

• Firefox 2.0
• IE 7
• Safari 3.0 Beta
• Opera 9.0

IE6 will be somewhat limited due to the usage of PNG’s with an alpha channel. IE6 is the only widely used browser that doesn’t support it. Currently the code doesn’t do browser detection to turn off the highlight for IE6 users if it is turned on for other users.

Versions - Changelog

• 0.6 - June 23 200
  • Fixed a bug with smooth going past 100%
  • Added indeterminate mode
  • Added License, Changelog and Readme for a better release.
• 0.5 - June 16 2007
  • First Version

This entry was posted on Saturday, June 16th, 2007 at 9:49 pm and is filed under Javascript, Website. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.