The <progress> Element
As defined in the HTML Living Standard, the <progress> element displays an indicator showing the completion progress of a task, typically represented as a bar.
<label for="upload">Uploading...</label>
<progress id="upload" value="45" max="100">45%</progress>
View HTML Living Standard: The progress element
Technical Attributes
value: The current progress value. If omitted, the progress bar is indeterminate.max: The value that represents 100% completion. Defaults to 1.0.
WCAG Requirement: Info and Relationships
Success Criterion 1.3.1 (Level A): Information, structure, and relationships conveyed through presentation can be programmatically determined.
A progress bar created with a <div> and CSS width is invisible to screen readers. The <progress> element provides a native role (progressbar) that tells the user exactly what the element is and how much progress has been made.
Progress vs. Meter
It is a common mistake to use these two elements interchangeably.
<progress>: Used for active tasks that are currently completing (e.g., file downloads, installation).<meter>: Used for static measurements of a known quantity (e.g., disk space, battery level).
A11y Tip: Indeterminate State
When the value attribute is missing, the progress bar is "indeterminate." This is useful when you know a task is happening but don't know how long it will take. Ensure you provide a text description (e.g., "Loading, please wait...") so the user knows the application hasn't frozen.