CSS and javascript progress meter

For a little video project, my daughter wanted a computer screen displaying a fake progress bar. I haven't played with GUI programming languages for ages (the last time must have been with Delphi Pascal some 15 years ago). So I thought this should certainly be possible to do in a web browser with some CSS and javascript, and would also be an opportunity to learn some javascript and DOM interaction basics.

I first found a few examples on the web, but they all used animated GIFs. I didn't want to bother with creating animated gifs, and besides, I wanted to be able to style the progress window using only CSS, so that sizes and colors could be changed quickly enough for my impatient daughter.

So this is a solution using only CSS and javascript, and no image at all. Have a look at the source code of this CSS and javascript progress bar demo.

Both the CSS and the javascript are embedded in the HTML file.

(Tested in Firefox 2.0.0.14, Opera 9.01, Safari 3.1.1, MSIE 5.01 and 6.0. All in WinXP SP2).