This is a brief look at how to make a progress bar in HTML and CSS only. I didn’t want to use the pre-made Bootstrap examples because Bootstrap somehow felt like cheating. Because it is cheating. If I can hand-write this, you can too. Turns out it was far less pain than I thought it would be. Here are the steps I took. I can’t tell you this is the right way, but it works for me.

Step 1. Bar for the course.

All of the stuff I’ve half-read (no one reads a full book) about development all come down to a simple maxim. Do the easy things first. For me, this was to create an empty “bar”, and completely fill it. So I created an empty section, “progress-bar”, and give it a background color. Add some padding to that, and you get a passable “bar” type thing. Once you add in a border, it doesn’t look too bad.

And here is the pretty basic HTML/CSS for that bar above

Step 2. Progression

Progress bars are rarely full. After all, they indicate progress, not achievement. I spent a long time trying to achieve this with an internal div, and margins. It didn’t work and would be fiddly if it did. So I turned to gradients instead.

At first, I couldn’t get it to stop fading like a 1990’s shell suit top. But I changed the % values until it worked. Here it is.

And you can see the gradient rule at the end:

NB. This may not work on old Internet Explorer. But if you need to care about that you’re getting paid more than me, so you’ll have to sort yourself out.

Step 3. To progress, you must go backwards

What’s past is prologue. Shakespeare said that, and it somehow seems relevant to realising you’ve done something… sub-optimal. I had been creating new a new class for every variation. I realised that I could actually have one class to control the common themes (width, height, border) and another to control the color and the % of the gradient.

You can see in the following gist, the progress-bar rule doesn’t have a color. The new class selector does. So, do that. Also, ignore the empty DIVs. I put them in to try something out and it failed. So don’t use them.

Step 4. The long march of progress

That’s it. Change the colors and % as you see fit. Just make a new rule for each class you make and see what happens. Here’s the .good the .bad and the .ugly, below. These ones are in CodePen so you can see it action.

See the Pen Progress Bar Examples by Ed Gordon (@edwardcgordon) on CodePen.