Two divs, a little CSS. Progression from green to yellow to red. Optionally with or without text.

Example

The gradient of the progress bar's div is completely covered by the inner div when its width is set to 0. This is achieved by the oversized right border (10000px). As the width increases, the gradient will show through due to the inner div's transparency, while its right border will also shift to the right into the invisible overflow area.

Between green and red, yellow is positioned at 75% of the total width. The width of the progress bar is set by the width property of the inner div.

Progress bar with text

Text can be styled through the CSS class progressbar-text.

Animated examples

Then animations use javascript to set the width of the inner div. Basically this works as follows:

Without text:

With text: