Semantic Steps Progress Bar

A clean and semantic progress bar styled around a singles class.

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 default styles 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

See the Pen Semantic Steps Progress Bar by Carlos Ballena (@cballenar) on CodePen.