How to use and style progress element in HTML5

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.

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.

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() {
  counter++;
  document.getElementById( 'demo-progress-bar' ).value = counter;
  if( counter == 100 ) {
    clearInterval( timer );
  }
}
var timer = setInterval( progressDemo, 100 );

Live demo