HTML progress playground

Explore progress with controls for the current value, the task maximum, and the indeterminate state created by omitting the value attribute.

Presets

Choose a configuration as a starting point, then adjust any control.

Content

Accessible label

Text inside progress is fallback content only. Use label, aria-label, or aria-labelledby to provide an accessible name.

Include fallback text

Content between the progress tags is a fallback for older browsers, but it does not replace an accessible label.

Attributes and state

Indeterminate state

Enabling this state removes the value attribute. The browser shows that activity is ongoing without communicating how much remains.

Determinate

Uploading portfolio.zip 68%

HTML

<label for="task-progress">Uploading portfolio.zip</label>
<progress id="task-progress" max="100" value="68">
  68%
</progress>