A very clean semantic HTML progress bar styled with nothing but CSS, requires only one class to style all steps, finished or unfinished.

This stepped progress bar was designed to use only the most basic code. It uses an ordered list with no additional spans or divs and it requires only one class applied to the current element.

This works by applying the standard selectors to completed elements (the ones that come before the current element) and using the CSS general sibling selector (~) for unfinished elements (the ones after the current element.)

The numbered circle and the line are created with good old pseudo elements and the counter property.

Source Links

• View Source Code