Yet another pure CSS progress bar

Inspired by Ivan Vanderbyl’s implementation, I also put together a progress bar, in pure CSS. The transition of the blue bar is also done with CSS, only the text is being updated with JavaScript. The animation is done using JavaScript to make sure it synchronizes nicely with the percentage text. It is also possible to animate it with pure CSS though.

The full code is in one simple HTML file, available in the public domain. Demo code can be found here.

Tested with:

  • Chromium/Chrome 12
  • Firefox 4
  • Opera 11
  • Android Browser (Froyo, with minor style glitches)