---
outline: deep
---

# Progress

Progress bars are used to indicate the completion status of a task. Commonly used for file uploads, multi-step processes, and loading indicators with a known duration.

**`.l-progress`** — Native HTML Element

## Options

### With value

Set the `value` attribute between `0` and `1`.

```html
<progress
  class="l-progress"
  aria-label="Loading content…"
  value="0.6"
/>
```

### Indeterminate

Omit the `value` attribute for an indeterminate animation.

```html
<progress
  class="l-progress"
  aria-label="Loading content…"
/>
```

### Vertical

Add `data-orientation="vertical"` attribute.

```html
<style>
  @scope (#demo-vertical) {
    .l-progress {
      --track-color: var(--color-purple-200);
      --indicator-color: var(--color-purple-800);
    }
  }
</style>

<ul
  id="demo-vertical"
  class="grid w-full"
>
  <li class="flex px-3 py-2 h-16 bg-white">
    <progress
      class="l-progress"
      aria-label="Loading content…"
      data-orientation="vertical"
      value="1"
    ></progress>
    <div class="flex-1 px-4 content-center text-sm font-semibold">Paiement acceptée</div>
  </li>

  <li class="flex px-3 py-2 h-16 bg-purple-100">
    <progress
      class="l-progress"
      aria-label="Loading content…"
      data-orientation="vertical"
    ></progress>
    <div class="flex-1 px-4 content-center text-sm font-semibold">
      Première récurrence en cours de traitement
    </div>
  </li>

  <li class="flex px-3 py-2 h-16 bg-white">
    <progress
      class="l-progress"
      aria-label="Loading content…"
      data-orientation="vertical"
      value="0"
    ></progress>
    <div class="flex-1 px-4 content-center text-sm font-semibold">Transaction Terminée</div>
  </li>
</ul>
```

## Accessibility

### Criteria

- **Role** — Uses native `<progress>` — implicit `progressbar` role
- **Accessible name** — Must have an associated `<label>` or `aria-label`
- **Color** — Indicator and track colors meet non-text contrast ratio
- **Motion** — Indeterminate animation respects `prefers-reduced-motion`

### Rules

- Always pair the `<progress>` element with a visible `<label>` or `aria-label`
- Set `value` for determinate progress; omit for indeterminate

## API reference

### Importing

```css
@import 'luxen-ui/css/progress';
```

### Attributes & Properties

- **value** — Current progress between `0` and `1` (omit for indeterminate).
- **data-orientation** — vertical — Vertical orientation.

### CSS classes

- `.l-progress` — Base progress bar style.

### CSS custom properties

- `--size` (default: `4px`) — Bar thickness.
- `--track-color` — Track background color.
- `--indicator-color` — Fill/indicator color.
- `--indeterminate-animation` — Animation name for the indeterminate state.