Progress

<div id="progress-demo" class="progress" role="progressbar" aria-label="Loading" aria-valuenow="13" aria-valuemin="0" aria-valuemax="100">
  <span style="width: 13%"></span>
</div>
<script>{`
setTimeout(() => {
  const progress = document.getElementById("progress-demo");
  const indicator = progress?.querySelector("span");
  if (!progress || !indicator) return;
  progress.setAttribute("aria-valuenow", "66");
  indicator.style.width = "66%";
}, 500);
`}</script>

Usage

Include CSS

Import Tailwind and one full Basecoat style bundle.

@import "tailwindcss";
@import "basecoat-css/vega.css";

Or import only the base CSS, Progress component CSS, and one style pack.

@import "tailwindcss";
@import "basecoat-css/base.css";
@import "basecoat-css/components/progress.css";
@import "basecoat-css/styles/vega.css";

Using CDN or bundler imports? See the Installation page.

Add your progress HTML

Add class="progress" and role="progressbar" to the root. Use one child <span> as the visual indicator.

<div class="progress" role="progressbar" aria-label="Loading" aria-valuenow="66" aria-valuemin="0" aria-valuemax="100">
  <span style="width: 66%"></span>
</div>

HTML structure

<div class=“progress” role=“progressbar”>: Progress root. Set aria-label or aria-labelledby, plus aria-valuenow, aria-valuemin, and aria-valuemax.
<span style=“width: …”>: Visual indicator. Its width should match the current value.

Examples

Label

Upload progress66%

<div class="field">
  <div class="flex items-center gap-3 text-sm">
    <label id="progress-label">Upload progress</label>
    <output class="ms-auto tabular-nums">66%</output>
  </div>
  <div class="progress" role="progressbar" aria-labelledby="progress-label" aria-valuenow="66" aria-valuemin="0" aria-valuemax="100">
    <span style="width: 66%"></span>
  </div>
</div>

RTL

Progress supports dir="rtl" on the root or a parent.

تقدم الرفع ٦٦%

<div class="field w-full" dir="rtl">
  <label id="progress-upload-rtl" for="progress-upload">تقدم الرفع <span class="ms-auto">٦٦%</span></label>
  <div id="progress-upload" class="progress" role="progressbar" aria-labelledby="progress-upload-rtl" aria-valuenow="66" aria-valuemin="0" aria-valuemax="100">
    <span style="width: 66%"></span>
  </div>
</div>