<progress> element offers a visual representation of the completion status of a task. It's generally displayed as a progress bar, indicating how much of a particular task, such as downloading a file or filling out a form, has been completed. The element can either show tasks with a known endpoint (determinate) or those where the exact completion point remains uncertain (indeterminate).
Examples and Usage
While there are diverse scenarios where this element can be leveraged, we'll mostly focus on demonstrating its foundational aspects.
When we have clarity on the task's completion status:
<label for="download">Download progress:</label>
<progress id="download" max="100" value="45"> 45% </progress>
In the illustration above, a file download progress is represented, with the progress bar currently at 45% completion. The label helps in providing context to what the progress bar is showing, and the text inside the tags acts as a fallback for older browsers.
When the task's completion point is unknown:
So, this represents an ongoing activity, like content loading, without specifying its completion point. Different browsers might render the default appearance of this progress bar differently, offering a visual cue that an activity is underway.
After examining these states, it's worth noting the distinction between
<meter>. While the former is designed to represent the progress of tasks over time, the latter showcases scalar values within a range. For instance, using
<progress> to indicate disk space usage would be inappropriate; instead, the
<meter> element would be the correct choice for such a scenario.
<progress> element can sometimes be nuanced due to varied browser implementations. While the core look is adjustable using standard CSS properties, achieving a uniform appearance across browsers might necessitate the use of vendor-specific prefixes.
In addition to global attributes, the
<progress> element comes with a set of specific attributes to customize its behavior.
|Specifies the total amount of work the task requires. If present, it must be greater than
0 and a valid floating-point number. Defaults to
|Specifies the completed portion of the task. It's mandatory to be a valid floating-point number between
0 and the value of
max is omitted, it must be between
1. Without a
value attribute, the progress bar is indeterminate.
Visual representation is beneficial for many, but certain users depend on assistive technologies to interpret the webpage content.
<progress> element, providing an accessible label is typically advised. Although the ARIA labeling attributes (
aria-label) can be used, opting for the
<label> element offers a more direct approach.
Furthermore, any text placed between the
<progress> tags isn't treated as an accessible label; instead, it's primarily recommended as a fallback for older browsers that might not fully support this element.
It's also relevant to remember that if the
<progress> element is describing the loading progress of a particular section of a page, attributes like
aria-describedby can be used to point to the status. When a section is being updated, the
aria-busy="true" attribute should be set, indicating that the content for that region is loading.
<progress>element inherently assumes a minimum value of
0, and the
minattribute isn't allowed. This differentiates it from the
It's worth noting that the
<progress>element does not permit self-closing. Make sure you have both opening and closing tags when using it.
<progress>can work in tandem with event handlers, allowing for reactive updates. One could employ the
onchangeevent to monitor and reflect the progress of a user-driven task such as file uploads or form completions.
document.querySelector, the script can modify the
valueattribute of the
<progress>element to reflect the current status in real time.
For a detailed breakdown of specific browser nuances and older version support refer to the first link in the Useful Resources below.