Tutorial: A simple progress bar

Last year, when I created my page for updates about challenges I wanted to add something that visualizes my current progress. I wanted more than just lists and added a progress bar for each challenge as you can see here.

These progress bars are actually pretty easy and just need a few lines of html and css which will be explained in this tutorial.

The HTML:

1
2
3

<div id="goal">
	<div id="progress"></div>
</div>

All you need is two div, one inside the other. The one with the id “goal” is the outer box and the one with the id “progress” is going to be the inner one. Now we only need to assign styles that make them look like a progress bar.

The CSS:

First we have the rules for the outer box. We need a fixed width and height. You can choose any value you want. We also need a background color. If you want your progress bar to be centered, you also have to add the margin.

1
2
3
4
5
6

#goal{
	height: 20px;
	width: 500px; 
	background: #666;
	margin: auto;
}

The inner box gets the same height as the outer box. The width should show your progress, so you’re just going to use the percentage. Assign a different background color and you’re ready.

1
2
3
4
5

#progress{
	height: 20px;
	width: 25%; 
	background: #92d4c3;
}

You don’t want to write these rules into an external stylesheet though because you want to change the width all the time. That’s why you should use the style attribute and write the rules directly into your html = your post/page like this:

1
2
3

<div id="goal" style="height: 20px;width: 500px;background: #666;margin: auto;">
	<div id="progress" style="height: 20px;width: 25%;background: #92d4c3;"></div>
</div>

If you liked this tutorial and use wp.org you should definitely come back for the next one, as I will show you how to add these progress bars even more easily and with less code.

Feel free to ask questions in the comments.

For more Code & Design Tutorials see this page.

Up next: WP –  How to add your own shortcodes