Coding a Progress Bar in only HTML and CSS

Today we're going to dive into creating a progress bar in HTML and CSS.

Let's jump into the code.

I have a bare bones HTML page:

Pretty simple. A head and body tag. The head includes a title tag, just to label our page and the link tag allows us to reference an external stylesheet.

I like to start out by stubbing out HTML and then writing the styles to go with it. The HTML gives me something to hang my CSS on.

Within our body let's use an unordered list. We're going to let each list item represent a segment in our progress bar:

In the browser, this is what we're looking at:

Pretty bland.

Let's talk through our requirements and strategy:

Anytime you're coding, just take it one step at a time. We can use our list as an outline for how we want to tackle this. So, first up: each list item should be a dot in our progress bar.

Let's remove the current bullets and have the list display horizontally.

We want circles for each item:

Awesome.

The text should appear in a speech bubble and only be displayed above the current item.

Let's go back to our HTML and add a little more mark-up to make it easier to control through CSS.

I'm going to add a class of current to the current item.

To make it easier to style the text and separate it from the list item, I'm going to wrap the content with a span.

Good, good.

Now, in CSS, we can hide the text:

Within the browser, this is what we're looking at:

Then, display it only for the current item:

Now, let's get that speech bubble. This takes a little bit of CSS trickery, but can be done completely within CSS:

So, far this is what we have within the browser:

It's looking good, we just need to place it. If we use absolute positioning, we can move it above the correct dot pretty easily. Just remember that positioning is always relative to its parent. To make sure that the bubble is above the correct dot and not the entire page, we need to give the parent a positioning of relative too.

When we added that, our bubble went off the page. Let's add a wrapper around our progress bar to give it some space:

I'm going to put our wrapper styles at the top of the page so that our CSS reads similar to our HTML, top to bottom.

Great! Now, we just want that tag centered over the dot.

We can add this line left: 50%; However, you might have been surprised to see our box shift slightly to the right. — And it's definitely not centered. The upper left corner is placed at the center of our dot, but not the center of our speech bubble.

If you Goggle this, you might see some people resolve it with a negative left margin. This works if you know the width of your object, but in our case, we don't. "Step 1" is not going to be as wide as "Step 100." That might sound ridiculous, we're not going to have 100 steps, but you get the idea. We want our code to be as flexible as possible and handle for these types of use cases.

There's actually a pretty easy solution.

This moves our center point over 50%. Perfect.

Now, we just need a little tag, tail, triangle — whatever you want to call it from our speech bubble.

This will seem a little bit of a hack — and honestly, I always look this up when I code it. But, let's talk through how this works.

We're going to use the pseudo element, after to inject code after the span.

When you use an after you have to use the content property to get it to display. We don't have any content so we can just set it to empty.

We want it to be positioned absolutely, to the bottom of the speech bubble, -10px.

We want it to be centered, so we're going to use our transform / translateX trick:

Now, here's the magic — the triangle. Let's talk through how this works, first.

Let's take a box and add a border to each of the sides. I've given each side a different border color to make it easier to visualize.

Now, if you give the box a width and height of 0, this is what it would look like.

You can start to see the triangles.

In our case, the tag is going to point down, so we can get rid of the bottom border.

Then, all we need to do is make the side borders transparent, leaving our triangle!

The code for that looks like this:

When we're listing out our border, we're going to start at the top, and work around the box clockwise: top, right, bottom, left.

Since, we didn't list a left it will assume the same value for right. Same for the border-color:

Again, since we didn't list a value for the bottom it uses the same value for the top and the left uses the same value for the right.

Altogether now:

![]()

Last step.

We want to style our circles based on the status: past, current, future.

Let's add some additional mark-up to our HTML:

For a step in the past, this is pretty straightforward:

![]()

We can leave the gray, the default color, for the future.

We just need to style the current item.

Let's take this one step further and add an extra ring around the current state. We can create a faux double border.

The "first" border will be white, the same as the background color:

Then, we can create a "second" border with a box-shadow.

With box-shadow the first property is the horizontal offset, the second value is the vertical offset. We want both of these to be 0. The 3rd value is blur. We want to have a hard edge so that it looks like a border. So, that's 0. Spread is the 4th value, that's basically a border width, so 2px. Last value is the color: #f40082.

Give that a save and refresh the browser:

Winning!