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);

RTL

Add dir="rtl" to any parent element, typically <html>, to render right-to-left. See the RTL guide for details.

<div id="progress-rtl-demo" dir="rtl">
  <div class="field">
    <label class="label" for="progress-rtl-upload">
      <span data-i18n="label">تقدم الرفع</span>
      <span class="ms-auto tabular-nums" data-i18n="value">٦٦٪</span>
    </label>
    <progress class="progress" id="progress-rtl-upload" value="66" max="100"></progress>
  </div>
</div>
 
<script>
  const translations = {
    ar: { dir: "rtl", label: "تقدم الرفع", value: "٦٦٪" },
    he: { dir: "rtl", label: "התקדמות העלאה", value: "66%" },
    en: { dir: "ltr", label: "Upload progress", value: "66%" },
  };
  window.addEventListener("message", (e) => {
    const t = translations[e.data?.lang];
    if (e.data?.type !== "sp-language" || !t) return;
    document.getElementById("progress-rtl-demo").dir = t.dir;
    document.querySelectorAll("[data-i18n]").forEach((el) => {
      el.textContent = t[el.dataset.i18n];
    });
  });
</script>