Home / Articles / Programming languages / Markup languages / HTML & CSS / How to use and style progress element in HTML5

How to use and style progress element in HTML5

How to use and style progress element in HTML5
How to use and style progress element in HTML5
Authors: Sergey Fedus
  • Currently 0 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 0/5 (0 votes cast)

Thank you for rating!

You have already rated this page, you can only rate it once!

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.

In HTML5, there is a new element - progress which acts as a regular progress bar and is used to visualize the progress completion of a certain task such as data download on a server.

In this article an example is examined on how to add such elements on a page and style them; also this article shows a method that changes values of such elements using JavaScipt.

Adding progress bar on a page

To add progress bar on a page, the progress element must be used. Values of the progress bar must be defined by value and max attributes in progress element. Here is an example:

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

Since the base implementation uses standard forms, the visual representation dependents on the platform. Below is an example of how the progress bar looks in Windows 7.

Progress bar in Windows 7

As was mention above, progress element is a regular progress bar in HTML5 and simply speaking it represents a progress of a task where max attribute specifies how much work the task needs in total and value attribute specifies how much of the task has been made.

Browser support: Chrome 8+, Firefox 16+, IE 10+, Opera 11+, Safari 6+.

Styling progress bar

Now let's define styles for the progress bar, that is, to make it look the same on any platform.

To add styles for the progress element, we simply use the element selector. In an example below we change background color, remove borders and make corners rounded.

progress {
  background-color: #00FEFD;
  border-radius: 10px;
  border: 0;
  height: 20px;
  width: 200px;

But, there is a problem, every browser renders styles a bit differently:

  • In Firefox, styles only affect the progress bar while the progress indicator, which shows the current value, is not affected.
  • In Chrome and Safari, styles are not applied, except Webkit ones.



Progress bar in Chrome


Progress bar in Firefox


Progress bar in IE


Progress bar in Opera


Progress bar in Safari


So, in Chrome and Safari the appearance of the progress element can be changed with the help of pseudo-classes: -webkit-progress-bar and -webkit-progress-value.

The first one can be used to define styles for the progress bar and the second one for the progress indicator (the current value of the progress completion).

rogress::-webkit-progress-bar {
  /* styles */

progress::-webkit-progress-value {
  /* styles */

Firefox has its own pseudo-class -moz-progress-bar which can be only used to define styles for the progress indicator.

progress::-moz-progress-bar {
  /* styles */

Here is a complete list of all selectors to define styles for progress element.

progress {
  /* styles */

progress::-webkit-progress-bar {
  /* styles  */

progress::-webkit-progress-value {
  /* styles */

progress::-moz-progress-bar {
  /* styles */

Changing progress bar value in JavaScript

Now, let's take as an example a simple progress bar which has the following HTML code.

<progress max="100" value="0" id="demo-progress-bar"></progress>

To change the value of this progress bar in JavaScript the following code will suffice.

document.getElementById( 'demo-progress-bar' ).value = 45;

The code above changes the value of the progress element with id "demo-progress-bar" to 45.

Here is a simple JavaScript code that changes the value of the progress element from 0 to 100 increasing it by one every 100 milliseconds.

var counter = 0;
function progressDemo() {
  document.getElementById( 'demo-progress-bar' ).value = counter;
  if( counter == 100 ) {
    clearInterval( timer );
var timer = setInterval( progressDemo, 100 );

Live demo

Read also

Form validation in HTML5

Form validation in HTML5

New types of element input in HTML5

New types of element input in HTML5

Discussion (total 2 comments)

Patrick Radulian
February 26, 2015 at 07:30 am
In your last code block, it should read "clearInterval" instead of "clearTimeout", I believe.
Sergey Fedus
Administrator User
February 26, 2015 at 07:50 am
Hello Patrick Radulian!
Thank you for your help! I made this mistake accidentally! I have already corrected the article!

Log in or create a user account to post a comment.


Quick navigation

General navigation