Subscirbe to Kodhus news letter and get new tips and tutorials right in your inbox by entering your email below

Step Progress bar, CSS Only

Difficulty Level

Today we will build a step progress bar, one of the useful components that is used usually in multi-step sign up forms and any use-case that needs a consecutive progressive flow to be shown to the user.

HTML structure

As you can see, we have progressbar element as the main element which represents our progress bar.

Styling it

We will use Pseudo elements, :before and :after, and the + CSS selector to style our markup for our step progress bar. Since we have 4 steps, we set the width of each .progress bar li to be 100%/4 which is 25%. We use .progressbar li:before to create our step circles and .progressbar li:after for the lines between them. We have used counter-reset to add numbers in the circles. Take a look at the demo.