Web Development

This part is of the HTML5 Post Series dedicated to spread knowledge about HTML5

Progress bars are usability patterns that represents how long a process would be. It may also represent how long you still need to wait.

A few years ago, progress bars were introduced to the web. Javascript scripts, some CSS and a bit of HTML code were used to develop this usability pattern.

The famous ones of today are jQuery UI’s progress bar and Twitter bootstrap’s progress bar component.

HTML5 has also introduced its own implementation. This is through the progress tag.

Attributes

The progress tag has two attributes:

  • value – Represents how much has been completed
  • max – Represents how long the progress will be

Sample Code

Represents 30% completion:

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

Represents 80% completion:

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

In Action

See the progress tag in action! using the above code with 30% and 80% completion.

Browser Compatibility

The progress tag is supported by Chrome 6.0+, Firefox 6.0+, IE10 and Safari 5.2+