<progress>: the "progress indicator" element

The HTML <progress> element displays a marker that shows the progress of completing a task, typically displayed as a progress bar.

Attributes

max

This attribute describes how much work the task indicated by the <progress> element requires. The max attribute, if present, must have a value greater than 0 and be a valid floating-point number. The default value is 1.

value

This attribute specifies the amount of activity that has been completed. Must be a valid floating point number between 0 and max, or between 0 and 1 if max is omitted. If there is no value attribute, the progress bar is indeterminate; this indicates that an activity is in progress without any indication of the expected time.

Note: Unlike the <meter> element, the minimum value is always 0 and the min attribute is not allowed for the <progress> element.

Note: The :indeterminate pseudo-class can be used to compare indeterminate progress bars. To change the progress bar indefinitely after assigning a value to it, you need to remove the value attribute with element.removeAttribute('value').

Example

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

Accessibility issues

Labeling

In most cases you need to provide an accessible label when using <progress>. While you can use the standard ARIA labeling attributes aria-labelledby or aria-label as you would for any element with role="progressbar", when using <progress> you can alternatively use the <label> element.

Note: Text placed between element tags is not an accessible label, it is only recommended as a fallback for older browsers that do not support this element.

Example

<label>Caricamento del documento: <progress value="70" max="100">70%
</progress></label>

Describe a particular region

If the <progress> element describes the loading progress of a section of a page, use aria-describedby to point to the status and set aria-busy="true" on the section you are updating, removing the aria- attribute busy when loading is complete.

Example

<div aria-busy="true" aria-describedby="progress-bar">
  <!-- Contenuto in caricamento -->
</div>