Progress

Progress indicators using the native HTML progress element.

Basic Progress

Download progress 70%

<label>
  Download progress
  <progress value="70" max="100">70%</progress>
</label>

Different Values

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

With Percentage Text

Upload progress 45%

45%

<div>
  <div style="display: flex; justify-content: space-between;">
    <span>Upload progress</span>
    <span>45%</span>
  </div>
  <progress value="45" max="100">45%</progress>
</div>