All you need to do is create an instance of the dwProgressBar and pass your desired options. It's quick and easy. To move the progress bar, all you need to do is call the "set()" method, passing it the desired percentage.

Practical Uses

You could use this progress bar for:

An image preloading script

Form completion tracking

Internal goal tracking applications

Anything you want!

I've made the progress bar as flexible as possible by allowing the developer to format each generated DIV using CSS.

For maximum performance, we all know we must put our assets on CDN (another domain). Along with those assets are custom web fonts. Unfortunately custom web fonts via CDN (or any cross-domain font request) don't work in Firefox or Internet Explorer (correctly so, by spec) though...

I get asked loads of questions every day but I'm always surprised that they're rarely questions about code or even tech -- many of the questions I get are more about non-dev stuff like what my office is like, what software I use, and oftentimes...

There's yet another reason to master more than one JavaScript library: you can use some of them together! Since MooTools is prototype-based and jQuery is not, jQuery and MooTools may be used together on the same page.
The XHTML and JavaScript
jQuery is namespaced so the...

@Christian: The problem is likely due to the fact that Moo 1.1 didn’t use the “set()” functionality. You’ll need to go back and look at the 1.1 docs.

Storeman

Nice job!

I would recommend some enhancements, instead of ID’s I would recommend using classnames. So multiple instances can be created. The elements can be stored inside the class. I also used a template for displaying and added message-support. Not such a big difference, but I thought I should share ;).

Because when you have a succession of progressBars, the last text is not cleared and you have multiple XHTML elements with the same id brrrr.
With something like this, the css stay on the road and DOM is respected.

Max

Hey David,

what’s the licence of these progress bar? Can I use it for commercial websites?

Thought you might be interested to see a website where your component is used or maybe give it a review or something. I made a forex prices and trend analysis tool that you can see at http://www.forex-prices.com/

and what I need to write in body to get this work??
I cope paste The MooTools JavaScript: dwProgressBar and copy paste css and MooTools Usage, put all this before head tag, also put the images, link to jquery and its not work for me?? Also can this go to another page when the countdown ends?

Alexei

Great class, but it misses feature to set look of progress bar elements through CSS classes, rather than IDs. I have several dynamically generated progress bars on my page, so creating CSS for each progress bar is inadequate. Instead, I modified your class to support CSS classes as well. It is useful feature and easy to implement.