Progress bar

wu-progress styles the native <progress value max> element. Without a value it is indeterminate. Label it with a <label for> or aria-label.

Class or variable	Effect
`wu-progress`	Root, on `<progress>`. Full width rounded bar, brand fill
`success`, `danger`, `warning`, `info`	Role fill
`sm`, `lg`	Thinner and thicker bar
`wu-progress-label`	Part, on `<label>`. Muted row with the name and the value at the ends
`--wu-progress--Height`	Bar height, for every size

The fill uses currentcolor, so a CSS color on the bar also sets it.

Default with a label

Uploading72% 72%

<label class="wu-progress-label" for="upload"><span>Uploading</span><span>72%</span></label>
<progress class="wu-progress" id="upload" value="72" max="100">72%</progress>

Indeterminate

Without value, a segment slides along the track. Under reduced motion it stands still in the middle.

<progress class="wu-progress" aria-label="Loading"></progress>

Roles

100% 45% 80% 95%

<div class="flex col gap-3">
  <progress class="wu-progress success" value="100" max="100" aria-label="Backup">100%</progress>
  <progress class="wu-progress info" value="45" max="100" aria-label="Sync">45%</progress>
  <progress class="wu-progress warning" value="80" max="100" aria-label="Storage">80%</progress>
  <progress class="wu-progress danger" value="95" max="100" aria-label="Quota">95%</progress>
</div>

Sizes

30% 50% 70% 90%

<div class="flex col gap-3">
  <progress class="wu-progress sm" value="30" max="100" aria-label="Small">30%</progress>
  <progress class="wu-progress" value="50" max="100" aria-label="Default">50%</progress>
  <progress class="wu-progress lg" value="70" max="100" aria-label="Large">70%</progress>
  <progress class="wu-progress" value="90" max="100" aria-label="Custom height" style="--wu-progress--Height: 1.5rem">90%</progress>
</div>

Right to left

The fill grows from the inline start, the right edge in right-to-left text, and the indeterminate segment slides in the reading direction. The label row swaps its ends too.

جارٍ الرفع40% 40%

<div class="flex col gap-3">
  <div>
    <label class="wu-progress-label" for="progress-rtl"><span>جارٍ الرفع</span><span>40%</span></label>
    <progress class="wu-progress" id="progress-rtl" value="40" max="100">40%</progress>
  </div>
  <progress class="wu-progress" aria-label="جارٍ التحميل"></progress>
</div>

Forced colors

In forced-colors mode the bar keeps a visible track and fill from the system colors.

Load only the progress bar

@use "@wovenui/components/progress";

The progress bar needs no other component.