# Progress

<Preview class="w-full max-w-sm">
<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>
</Preview>

## Usage

<Steps>
  <Step title="Include CSS">

Import Tailwind and one full Basecoat style bundle.

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

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

```css
@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](/installation).

  </Step>
  <Step title="Add your progress HTML">

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

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

  </Step>
</Steps>

### HTML structure

<dl>
  <dt><code>&lt;div class="progress" role="progressbar"&gt;</code></dt>
  <dd>Progress root. Set <code>aria-label</code> or <code>aria-labelledby</code>, plus <code>aria-valuenow</code>, <code>aria-valuemin</code>, and <code>aria-valuemax</code>.</dd>
  <dt><code>&lt;span style="width: ..."&gt;</code></dt>
  <dd>Visual indicator. Its width should match the current value.</dd>
</dl>

## Examples

### Label

<Preview class="w-full max-w-sm">
<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>
</Preview>

### RTL

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

<Preview class="w-full max-w-sm">
<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>
</Preview>