<progress>

The <progress> element visually represents task completion.

Use the value and max attributes to set progress, or omit value for an indeterminate state.

Pair with a <label> to give it an accessible name for screen readers.

Basic Progress

<progress value="0" max="100"></progress>
<progress value="50" max="100"></progress>
<progress value="100" max="100"></progress>

Indeterminate Progress

<progress></progress>

Progress with Label

<label>
  Upload progress
  <progress value="50" max="100">50%</progress>
</label>