Français

<progress>

Showing the progress of a task: download, form, quiz

— 1 min read

  • HTML
  • accessibility
  • semantics
  • interactions

<progress> — The progress bar

The <progress> element represents the completion of a task. It displays a native progress bar. Without a value attribute, it indicates an indeterminate task (loading in progress).

When to use it

You want to show the progress of a download, a form submission, a multi-step quiz, or any operation with an estimable duration.

What you gain

Accessibility: screen readers announce the completion percentage. The element has the progressbar role natively — no ARIA needed.

Code example

<label for="upload">Upload progress:</label>
<progress id="upload" max="100" value="72">72%</progress>
 
<!-- Indeterminate (loading) -->
<progress>Loading...</progress>

Further reading