Step by step build the Step Progress Bar with CSS

Hello everyone, surely when doing Front-end many times you will encounter the keyword ‘Step Progress Bar’ (from here I will call it SPB for short). What does it mean? SPB is basically a simulation of process steps in a certain event stream. For example, the shopping cart function includes: Add products to the cart> Confirm the shopping cart> Checkout, or account registration function including: Fill information> Confirmation> Register, blabla … Thus, thanks to SPB, users can easily know which step they are in to easily interact with the system, and in this article, I will work with you to build SPB entirely with CSS.

In this article I will demo the flow of 5 steps and we are in step 3 , ie step 1 and 2 are completed . Other cases are similar. The final product will look like this

Steps to take

Step 1: Create the HTML structure

The HTML structure as described above will be as follows

Step 2: Basic style for ul and li tags

Next we will need CSS for ul and li tags. There are some points to note that the parent ul tag will need the counter-reset to initialize the CSS counter, and the li tags will float: left to lie on the same line and have the same width: calc(100% / 5) ie width: calc(100% / 5) (because I have 5 steps )

Step 3: Style for li:before

The dots we will use :before to create, in addition to the basic styles you need to note content: counter(step) and counter-increment: step , will help us fill the above-created counter to each step. This will prevent you from having to manually fill in the count for each step

Step 3: Style for li:after

Next we will create a horizontal line connecting the dots with each other by using :after

However, after adding, you will see 5 dots but there will only be 4 lines so we have to delete a line of the first child item by adding the following CSS line.

Step 4: Add own styles for the active and complete states

And finally, to distinguish the active and complete states, we will add a bit of CSS for :before :after as follows

You can see the result quickly here

Advantages

Advantages

• Responsive is good because there is no hard fix width for each step
• Works well on many browsers
• Automatically fill the CSS counter for each step without manual input

Defect

• Due to the use of float and width , we always need to change the width value if the number of steps changes, which makes us consider thinking of a more flexible way of dividing width by using flex: 1 may come. In the following articles, let’s wait and see =))

Conclude

Above I have introduced to you ‘Step by step building Step Progress Bar with CSS’, hope to help you when working

If you find a good article, give me +1 upvote. If you like me, click the follow button for more cool stuff. Good luck !