A progress bar can be used for more than just…displaying progress. No doubt you’ve seen them used for a variety of purposes, and the reasoning is simple. Progress bars, if done correctly, can be a visually interesting way to display information on your website.
There are many libraries out there for creating them, but progress bars don’t have to be overly complicated. Let’s go through a few examples.
A Simple Progress Bar
At its most basic, a progress bar only needs two parts: the bar itself, and a container to hold it. Something like this:
<div class="holder">
<div class="bar"></div>
</div>
Simple enough, right? Now, with a little CSS, we can make it look nice. Again, doesn’t take much to do that:
.holder {
height: 12px;
background: #fefefe;
border-radius: 20px;
overflow: hidden;
box-shadow: inset 0px 0px 2px rgba(0,0,0,0.2);
}
.bar {
width: 60%;
background: #FD4E4E;
height: 100%;
}
The results will look pretty slick, and will work just fine as is. But, what if we want something that’s a little more visually interesting?
An Animated Progress Bar
This time, we are going to add some simple animation to the progress bar. This can be easily done in jQuery, but even more so in CSS. Let’s modify our CSS to the following:
@keyframes width {
from {width: 0;}
to {width: 60%;}
}
.holder {
height: 12px;
background: #fefefe;
border-radius: 20px;
overflow: hidden;
box-shadow: inset 0px 0px 2px rgba(0,0,0,0.2);
}
.bar {
background: #FD4E4E;
width: 0;
height: 100%;
animation: width 1s forwards;
}
With that simple switch, we now have this nice little animation on our progress bar. You can modify this to trigger on scroll or hover, or whatever is best suited for what you’re doing.
A Dynamic Progress Bar
Let’s assume that you would like to have the color of your progress bar change depending on how much space it fills. For example, anything below 20% would be red, between 20%-40% would be orange, etc. For this, will we need to write a script that will detect how wide the progress is and assign a background-color to it. To accomplish this, we will need to tweak our HTML a bit:
<div class="holder">
<div class="bar" size="19"></div>
</div>
<div class="holder">
<div class="bar" size="37"></div>
</div>
<div class="holder">
<div class="bar" size="60"></div>
</div>
<div class="holder">
<div class="bar" size="76"></div>
</div>
<div class="holder">
<div class="bar" size="99"></div>
</div>
You don’t have to have all five of these progress bars for this to work, this is just an example to show what each of these will look like when we run our script. The script will look for the size attribute we added to our bar <div>.
Speaking of which, here’s what the script looks like this:
<script>
jQuery(document).ready(function() {
$('.bar').each(function() {
var size = $(this).attr('size');
$(this).css('width', size+'%');
if (size >= 81) {
$(this).css("background-color", "#4F9CF6");
} else if (size >= 61) {
$(this).css("background-color", "#10E327");
} else if (size >= 41) {
$(this).css("background-color", "#F8F11B");
} else if (size >= 21) {
$(this).css("background-color", "#F6C34F");
} else if (size >= 0) {
$(this).css("background-color", "#FD4E4E");
}
});
});
</script>
The script loops through all instances of the bar <div> and, like I said above, grabs the value of the size attribute. It then takes that value and adds a width style to the progress bar. Finally, the script does a series of checks to see what background color the progress bar should get. These numbers can be tweaked if you have different needs.
Now, let’s take it one step further and add back in some animation as well as a number to each progress bar so the visitor knows the value of the bar. Let’s modify our script to the following:
<script>
jQuery(document).ready(function() {
$('.bar').each(function() {
var size = $(this).attr('size');
var duration = (size*10)+400;
$(this).append('<span>'+size+'</span>').animate({width: size+'%'}, duration);
if (size >= 81) {
$(this).css("background-color", "#4F9CF6");
} else if (size >= 61) {
$(this).css("background-color", "#10E327");
} else if (size >= 41) {
$(this).css("background-color", "#F8F11B");
} else if (size >= 21) {
$(this).css("background-color", "#F6C34F");
} else if (size >= 0) {
$(this).css("background-color", "#FD4E4E");
}
});
});
</script>
And we will also do some quick CSS edits as well:
.holder {
height: 15px;
background: #fefefe;
border-radius: 20px;
overflow: hidden;
box-shadow: inset 0 0 2px rgba(0,0,0,0.2);
margin-bottom: 20px;
}
.bar {
height: 100%;
width: 0;
color: #fff;
font-size: 13px;
line-height: 15px;
text-align: center;
font-family: sans-serif;
}
Quick Note On How To Make These Editable
If you’ve read any of my other posts, then you know I’m a fan of Advanced Custom Fields. We can use it to make these progress bars editable by those who won’t be comfortable editing code directly.
I’ve already explained how to create custom fields here, here and here, so I won’t go into that now. What we’ll want to do is create a custom text field which will allow anyone to enter a number between 1 and 100. Then we will reference that custom field in our code like this:
<div class="holder">
<div class="bar" size="<?php the_field('your_field_name'); ?>"></div>
</div>
Just replace your_field_name with whatever the field name is and we’re good to go. If you have multiple progress bars you’d like to display on your website, using a repeater may be a good idea.
Some Other Resources
Again, progress bar don’t have to be complicated, but if you’re looking for something a bit more robust than was discussed here, check out these progress bar libraries:
