A simple HTML progress bar with color gradient

20.08.2023 Web

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 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:

Progress: 0%

Did you like the content? If you want to do something good for me, you can pour a little coffee into my empty pot.
Just click the PayPal.Me-Button* below. Thank you very much!

*For more information on our PayPal.Me link, see Impressum & Datenschutz