Personally, I haven’t used any sort of progress bar in a while on a client website. It’s just not something we use very often and that’s partly because it involved a lot to make with pure HTML, CSS, and Javascript. Luckily, HTML5 makes it simple by using the <progress> tag:


<progress value="21" max="100"> 21% </progress>

It’s a pretty simple tag to use and the attributes are fairly straightforward.

Value - the amount of progress
Max - The top amount of progress
And you can also add in a class or an id to that

The text inside the tag is needed for accessibility so that screenreaders and other things can see what’s going on.

And that’s it! There’s literally nothing more needed but I’ll add more later. Here’s what it looks like out of the box:

21%

It’s very basic and doesn’t tell the user very much so let’s make it look a little bit better. The below HTML is still simple but will give more info and a better framework for CSS.


<label for="amount">Progress:</label>
<progress id="amount" value="15" max="100"> 15% </progress>

And then with some CSS:


#amount{
    background-color: #15d5a9;
    height: 20px;
    min-width: 500px;
    display: block;
    margin-top: 10px;
}
#amount::-moz-progress-bar { 
    background: #f1f1f1;
}
#amount::-webkit-progress-bar {
    background: #f1f1f1;
}

And when we tie it all together, we get this:

15%