<progress>

Overview

The <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.

Determinate State

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.

Indeterminate State

When the task's completion point is unknown:

<progress id="loadingContent"></progress>

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 <progress> and <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.

Styling the <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.

Attribute Breakdown

In addition to global attributes, the <progress> element comes with a set of specific attributes to customize its behavior.

Accessibility Aspects

Visual representation is beneficial for many, but certain users depend on assistive technologies to interpret the webpage content.

For the <progress> element, providing an accessible label is typically advised. Although the ARIA labeling attributes (aria-labelledby or 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.

Associated Elements

• <meter>

Additional Notes

• The <progress> element inherently assumes a minimum value of 0, and the min attribute isn't allowed. This differentiates it from the <meter> element.

• 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 onchange event to monitor and reflect the progress of a user-driven task such as file uploads or form completions.

• For tasks like tracking user-driven activities, JavaScript can update the progress dynamically. Using simple methods like document.querySelector, the script can modify the value attribute of the <progress> element to reflect the current status in real time.

Browser Compatibility

For a detailed breakdown of specific browser nuances and older version support refer to the first link in the Useful Resources below.

Useful Resources

Can I use HTML element: progress

The HTML Living Standard Specification: progress