<progress>

The <progress> element represents the completion progress of a task.

Point

• the progress is a number in the range zero to a maximum, giving the fraction of work that has so far been completed.

• The progress element is the wrong element to use for something that is just a gauge, as opposed to task progress. For instance, indicating disk space usage using progress would be inappropriate. Instead, the meter element is available for such use cases. [Example of bad usage]

HTML Attributes

• value = valid floating point numbers
  Specifies how much of the task has been completed.
  This attribute must have a value equal to or greater than zero, and less than or equal to the value of the max attribute. If the mux attribute is not present, the value attribute must have a value less than 1.0.

• max = valid floating point numbers
  Specifies how much work the task requires in total.
  This attribute must have a value greater than zero.

• form = the ID of a form element in the element's owner
  Associate the progress element with its form owner.
  By default, the progress element is associated with its nearest ancestor form element.

See also global attributes.

Examples

Example A

Here is a snippet of a Web application that shows the progress of some automated task.
The updateProgress() method in this example would be called by some other code on the page to update the actual progress bar as the task progressed [try it]:

<section>
  <h2>Task Progress</h2>
  <p>Progress: <progress id="p" max="100"><span>0</span>%</progress></p>
  <script>
    var progressBar = document.getElementById('p');
    function updateProgress(newValue) {
      progressBar.value = newValue;
      progressBar.getElementsByTagName('span')[0].textContent = newValue;
    }
  </script>
</section>

Example of bad usage

The progress element is the wrong element to use for something that is just a gauge

<!-- do not copy this example, it is an example of bad usage! -->
Storage space usage: <progress value=6 max=8>6 blocks used (out of 8 total)</progress>

Example of good usage:

Storage space usage: <meter value=6 max=8>6 blocks used (out of 8 total)</meter>

HTML Reference

The HTML5 specification defines the <progress> element in 4.10.16 The progress element.