Progress <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.

HTML tag<progress>

⏣Native HTML

⬡Progressive

◇Custom

⬢Shadow DOM

Native HTML Element

Options

With value

Set the value attribute between 0 and 1.

Code

HTML

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

Indeterminate

Omit the value attribute for an indeterminate animation.

Code

HTML

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

Vertical

Add data-orientation="vertical" attribute.

• Paiement acceptée
• Première récurrence en cours de traitement
• Transaction Terminée

Code

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

WCAG4.1.2

RGAA7.1

Accessible name

Must have an associated <label> or aria-label

WCAG1.1.1

RGAA1.1

Color

Indicator and track colors meet non-text contrast ratio

WCAG1.4.11

Motion

Indeterminate animation respects prefers-reduced-motion

WCAG2.3.3

API reference

Importing

CSS

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

Attributes & Properties

valueAttribute

Current progress between 0 and 1 (omit for indeterminate)

data-orientation="vertical"Attribute

Vertical orientation

CSS classes

.l-progressClass

Base progress bar style

CSS custom properties

--sizeName

Bar thickness (default: 4px)

--track-colorName

Track background color

--indicator-colorName

Fill/indicator color

--indeterminate-animationName

Animation name for indeterminate state