HTML offers a native element to show progression which is <progress>. In this post, we will learn a few CSS tricks to style such an element. We will also see how to make it look the same across browsers because the native element will, by default, render differently based on the browser.
First, let’s start by defining the HTML code:
<label>Progression: <progress value="70" max="100">70 %</progress></label>
We consider a <label> where we put the <progress> element and a relevant text that reflects the progression we want to highlight. Then, we define two attributes for our element. The max value which is, in most of the cases, equal to 100 to indicate 100% then the value that indicates the progress and it should be within the range [0 max]
There is no specific requirement or restriction on the value we should use. We can for example consider
<label>Progression: <progress value=".7" max="1">70 %</progress></label>
You may notice the text I am adding inside the progress as well (70%). This one is not mandatory but recommended as a fallback in case we are using an old browser that doesn’t support the <progress> element. In 2022, it’s quite rare to deal with such browsers but it’s always good to have a good coverage even for very old browsers.
Before we deal with CSS it should be noted that the implementation of <progress> element is different for each browser in the sense that its inner HTML structure is different. We mainly have 2 structures.
The one used by Firefox:
<progress>
<div pseudo="-moz-progress-bar"></div>
</progress>
And the one used by Webkit and blink browsers such as Chrome, Safari, and Opera:
<progress>
<div pseudo="-webkit-progress-inner-element">
<div pseudo="-webkit-progress-bar">
<div pseudo="-webkit-progress-value"></div>
</div>
</div>
<progress>
Such a difference is one reason that makes styling the progress element a tedious task as we have to write a style that matches both structures.










