Creating &amp; Styling Progress Bar With HTML5

This article is part of our “HTML5/CSS3 Tutorials series" – dedicated to help make you a better designer and/or developer. Click here to see more articles from the same series.

HTML5 introduced the progress bar element, which allows us to show the progress of certain tasks, like uploads or downloads, basically anything that is in progress

In this article, we will discuss how to add this element in the document, how to style it with CSS and animate the progress bar meter.

Let’s get started.

Recommended Reading: 35 Beautiful Progress Bar Designs

Basic Usage

The progress bar can be added with <progress>; the progress value is determined with the value, min and max attributes, as follows.


<progress value="10" max="100"></progress>

Since this is a native progress bar, the presentation is vary dependent on the platform. Below is how a native progress bar looks in Windows and OSX.

Now, let’s try styling this progress bar, so it has a consistent or similar look across all platform.

Styling Progress Bar

In the stylesheet, we actually can use the element selector to target and add style rules to <progress> element. In this example, we change the background color, remove the border line, and make it rounded by adding a border radius at half of its height.


progress {
	background-color: #f3f3f3;
	border: 0;
	height: 18px;
	border-radius: 9px;
}

However, each browser handles this a bit differently.

In Firefox, the styles affect the progress bar, while the progress meter / value is not affected.

In Chrome and Safari, it will remove the native styles and presentation from the platform and replace it with the Webkit stylesheet, the styles above will not be applied (at least, at the moment).

So, we need some more workaround in these cases.

In Chrome and Safari, the progress element is translated this way.


<progress>
    ┗ <div> ::-webkit-progress-bar
         ┗ <div>::-webkit-progress-value

Thus, to change the progress bar and the progress value styles in these browsers, we need to add those Webkit pseudo-classes.


progress::-webkit-progress-bar {
	/* style rules */
}
progress::-webkit-progress-value {
	/* style rules */
}

Firefox also has its special pseudo-class that is ::-moz-progress-bar. Unlike Chrome and Safari, this pseudo-class in Firefox refers to the progress meter/value.


progress::-moz-progress-bar {
	/* style rules */
}

To conclude, these are currently the entire selectors for styling HTML5 progress bar.


progress {
	/* style rules */
}
progress::-webkit-progress-bar {
	/* style rules */
}
progress::-webkit-progress-value {
	/* style rules */
}
progress::-moz-progress-bar {
	/* style rules */
}

Animate the Progress

Next, we will see how to animate the progress bar. Typically, the progress bar expands from left to right as the task progresses.

The idea is, the progress bar will expand from 0 and stop once it reaches the maximum value. We will also display the value number as it is progressing. Below is the HTML structure.

HTML


<progress id="progressbar" value="0" max="100"></progress>

CSS

In this example, we will use jQuery to animate the progress bar. So, we should also not forget to insert the jQuery, like so.


<script src="js/jquery.js" type="text/javascript"></script>

Then, we add the scripts to make the progress bar expand. First, we store the progress bar element, the progressbar value as well the maximum value, and the timeframe, in Variables.


var progressbar = $('#progressbar'),
	max = progressbar.attr('max'),
	value = progressbar.val(),
	time = (1000/max)*5;

Next, we create a variable that store the animation function. In this example, we call the variable loading.


var loading = function() {

}

Inside the above function, we set the progress interval. We will increase the value by 1 per timeframe — you can increase the value to make the progress run faster.


value += 1;

And then, we add the result to the progress bar.


addValue = progressbar.val(value);

We also show the value inside, next to the progress bar.


$('.progress-value').html(value + '%');

Next, we create a new function to run the animation function.


setInterval(function() {
    loading();
}, time);

At this point, the animation is already functioning. However, the value will keep increasing infinitely. So, we need to create a conditional statement for the animation to stop when it reaches its maximum value.

First, let’s store the above function in a variable like so.


var animate = setInterval(function() {
    loading();
}, time);

And, inside the loading variable, we add the conditional statement, as follow.


if (value == max) {
    clearInterval(animate);
}

The above script states that once the value is equal to the maximum value, clear the interval, which will stop the animation function.

That’s it and here are all the codes to animate the progress bar.


$(document).ready(function() {
	var progressbar = $('#progressbar'),
		max = progressbar.attr('max'),
		time = (1000/max)*5,
	    value = progressbar.val();

	var loading = function() {
	    value += 1;
	    addValue = progressbar.val(value);

	    $('.progress-value').html(value + '%');

	    if (value == max) {
	        clearInterval(animate);
	    }
	};

	var animate = setInterval(function() {
	    loading();
	}, time);
};