Progress Bar for Mootools

I was admiring the Progress Bar that World Of Solitaire has for loading its deck images, and noticed that when the value gets beyond 50%, the colour of the text changed from black to white to make it easier to read on the newly dark background.

Unfortunately, when the value was between about 49% and 51%, the numbers were half on a dark background and half on a light background, and therefore less legible because the text itself was either dark or light.

Thinking about that, I realised that some progress bars I’ve seen in Desktop environments get around this by colouring the text such that the part which was on the dark background was light and the rest was dark.


Of course, how would you actually do that using HTML and CSS??

Here’s the solution I came up with (works in Firefox – I’ll have a look at IE if anyone asks for it in that…):

The Demo

Note that the default value in the demo is 48%. In my browser, the ‘8’ is half on a dark background, and half on a light one. I’ve managed to come up with a way to colour half of the number dark and half light.

How I did it was draw the progress bar twice, once with a dark background and light text, and once with a light background and dark text. Then, I clip the bars so that only a certain amount of each is actually visible.

When you see a white 4, white/black 8, black %, you’re actually seeing two halves of separate elements’ text, stuck together to fool the eye!

The script is written for MooTools. Feel free to rewrite it for any other framework.

To use, do something like this:

var obj=new ProgressBar(48);

That simple!

There are optional parameters you can use as well. Here is an example using them all:

var pb=new ProgressBar(48,{
	'darkbg':'#006', // dark background
	'darkfg':'#fff', // dark foreground
	'lightbg':'#fff', // light background
	'lightfg':'#000' // light foreground

There are default values for all of these, so use what you need.

The Source


  1. It works fine in Internet Explorer 7, although you have missed off the “>” in the final closing tag on the page, so that causes a very minor issue. It’s a nice effect, so I’ll probably steal it some time 😉

  2. Thanks Dylan. I put that error in on purpose to see if anyone would notice (joke). I’m surprised that it works in IE. So many things don’t. It also works in Konqueror, so i guess it works in Safari as well.

    Feel free to grab it and use as you wish.

  3. Another way i’ve seen this that I really like is the ##% is displayed centered in the part of the download completed. looks really pretty, allows easy reading the entire time. alternatively, while under 50%, display in the un-downloaded part, then when over 50% display in the downloaded part.

    cool bar, none-the-less

  4. Fantastic Script! What licence is it under?

  5. Works fine on IE6 on virtual PC, too.

    Awesome job!

  6. @Sean – free. take it. do what you want. keep a reference to this blog post in your version and I’ll be happy.

  7. i wanna use it in my site i must show ur web site…or smth??

  8. Kenan, a reference in the JavaScript is good enough for me. the reference does not need to be visible to casual readers.

  9. Maa-ku Online : Blog » Blog Archive » Simple Progress bar - pingback on October 16, 2008 at 9:37 am

Trackbacks and Pingbacks:

%d bloggers like this: