There are countless examples of people making progress bars using nothing but CSS — this one is different.
There are no images, the HTML is extremely minimal and the animation is handled by a pseudo element. Unfortunately this means it's only animated in Firefox for now.
The CSS above is interactive — change the width value in Firefox to see the animation in action.
This is the only example I have seen so far that makes use of a negative background-position to animate the colour of the bar from red, through orange and yellow, to green — depending on the amount of progress made.
For those of you who don't want to wake the slumbering beast that is Firefox, here are a few more examples of the colour changing goodness that you are missing.
I've hard-coded non-animated widths on these to illustrate how the progress bar looks at vartious stages of its transition, at 0%, 25%, 50%, 75% and 100% progress.
The markup is beautiful! No wrapping or empty elements.
<div role="progressbar">85% Complete</div>
<div role="progressbar"> for a
<progress value="85%" max="100%"> would make this semantically better but browser support for styling progress elements is extremely poor at the moment.
An actual implementation of this would also need some method of updating the value(s) within the markup.
:after pseudo element causes.
I could also have increased browser support for this demo by using extra markup instead of pseudo elements but this goes against what I was trying to achieve.