A simple HTML progress bar with color gradient
Two divs, a little CSS. Progression from green to yellow to red. Optionally with or without text.
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