HTML Progress Bar with CSS-only Dynamic Labels
Pseudo-elements are awesome and there’s so much we can do with them! I’m specifically talking about the awesome ::before and ::after elements.
With these two pseudo-elements and a CSS function, we can display HTML attribute values on our web page.
We are going to work with the <progress> HTML element as it has a few exciting attributes we could use to enrich the visual experience of the user interacting with this element. Let’s add two of these elements to a new project template.
You can download the template and the source code of the finished example from Github:
<progress
class="percentage"
title="Loading..."
max="10"
value="1"></progress><progress
class="steps"
title="Work in progress..."
max="10"
value="8"></progress>
With no CSS styling added and just relying on the default styling assigned by the browser, this is how they look in Chrome on Mac OS:
The <progress> element was designed to capture and visually represent the…
