HTML <progress> Tag

The <progress> tag displays a horizontal progress bar with a percent complete value. This value can be programmatically updated and show progress as it evolves.

HTML Tag

Example

#

A <progress> bar that indicates 25% complete.

Reindexing files...

25%
<div>Reindexing files... </div>

<br />
<progress value="25" max="100"> 25% </progress>

Using <progress>

The <progress> tag indicates the percent complete of a task.

Effectively, this element shows the amount of work done, and left to do.

The <progress> element can be programmatically controlled with JavaScript.

More Examples

A <progress> bar that is repeatedly filled from 0 to 100% using JavaScript.

0% complete...

<p><span id="progress-text">0</span>% complete...</p>
<progress id="myprogress" value="0" max="100"></progress>

<script>
  setInterval( function(){
      let value = document.getElementById("myprogress").value;
      value = Math.min(value + .1, 100) % 100;
      document.getElementById("myprogress").value = value;
      document.getElementById("progress-text").innerText = Math.round(value);
  }, 10 );
</script>

Attributes for <progress>

This table lists the attributes for the <progress> element.

Attribute Value Description
max number When max is reached the task is complete.
value number Current task progress value.
id    identifier Defines a unique identifier for the progress element.
class    classnames Sets one or more CSS classes to be applied to the progress element.
style    CSS-styles Sets the style for the progress element.
data-*    value Defines additional data that can be used by JavaScript.
hidden    hidden Specifies whether the progress element is hidden.
title    text Sets a title that displays as a tooltip.

For additional global attributes see our global attributes list.


Did you know?

Did you know?

Difference between <progress> and <meter>

Both <progress> and <meter> display a percentage value over a hundred percent bar.

The <progress> element always starts at 0 and displays a progress value as it proceeds.

The <meter> element is more flexible and represents a scalar measurement within a known range.


Browser support

Here is when <progress> support started for each browser:

Chrome
8.0 Dec 2010
Firefox
16.0 Oct 2012
IE/Edge
10.0 Sep 2012
Opera
11.0 Dec 2010
Safari
6.0 Jul 2012

You may also like

Guides