Progress

The progress bar shows how far along a task is, like an upload, an onboarding flow, or a playback position. For picking a value, reach for the slider.

<progress class="progress" value="33" max="100" aria-label="Upload progress"></progress>

Usage

Add the progress class to a <progress> element with value and max attributes.

Class	Description
`progress`	Add to a `<progress>` element

<progress class="progress" value="33" max="100"></progress>

Examples

With label

Pair the bar with a label and value in a field.

<div class="field">
  <label class="label" for="progress-upload">
    <span>Upload progress</span>
    <span class="ml-auto tabular-nums">66%</span>
  </label>
  <progress class="progress" id="progress-upload" value="66" max="100"></progress>
</div>

Simulated upload

Drive the bar from JavaScript by setting value; start the upload to watch it fill.

<div class="field">
  <label class="label" for="progress-sim">Uploading backup.zip</label>
  <progress class="progress" id="progress-sim" value="0" max="100"></progress>
</div>
<button
  class="btn btn-outline"
  onclick="var bar = document.getElementById('progress-sim'); if (bar.dataset.running) return; bar.dataset.running = '1'; bar.value = 0; var t = setInterval(function () { bar.value = Math.min(100, bar.value + 1 + Math.random() * 4); if (bar.value >= 100) { clearInterval(t); delete bar.dataset.running } }, 80)"
>
  Start upload
</button>

const bar = document.querySelector("#upload-progress");
 
const timer = setInterval(() => {
  bar.value = Math.min(100, bar.value + 5);
  if (bar.value === 100) clearInterval(timer);
}, 200);