Progress

Progress bar indicator showing completion status. Use aria-valuenow for accessibility.

Default

Base

Class	Description
`.ui-progress`	Base class

Size

Class	Value
`.ui-progress--sm`	sm
`.ui-progress--lg`	lg

Variant

Class	Value
`.ui-progress--success`	success
`.ui-progress--warning`	warning
`.ui-progress--danger`	danger

Indeterminate

Class	Description
`.ui-progress--indeterminate`	indeterminate

Striped

Class	Description
`.ui-progress--striped`	striped

Animated

Class	Description
`.ui-progress--animated`	animated

Override these CSS custom properties to customize the component.

Token	Default	Description
`--ui-progress-height`	`calc(var(--ui-unit) * 1)`	Overall height
`--ui-progress-bg`	`var(--ui-color-bg-inset)`	Background color
`--ui-progress-fill`	`var(--ui-color-primary)`	Fill
`--ui-progress-radius`	`var(--ui-radius-full)`	Corner radius

Sizes

<div class="ui-flex ui-flex-col ui-gap-2">
  <div class="ui-progress ui-progress--sm" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
    <div class="ui-progress__bar" style="width: 40%;"></div>
  </div>
  <div class="ui-progress" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
    <div class="ui-progress__bar" style="width: 60%;"></div>
  </div>
  <div class="ui-progress ui-progress--lg" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
    <div class="ui-progress__bar" style="width: 80%;"></div>
  </div>
</div>

Colors

<div class="ui-flex ui-flex-col ui-gap-2">
  <div class="ui-progress ui-progress--success" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
    <div class="ui-progress__bar" style="width: 100%;"></div>
  </div>
  <div class="ui-progress ui-progress--warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
    <div class="ui-progress__bar" style="width: 60%;"></div>
  </div>
  <div class="ui-progress ui-progress--danger" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
    <div class="ui-progress__bar" style="width: 25%;"></div>
  </div>
</div>

Striped

<div class="ui-progress ui-progress--striped" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
  <div class="ui-progress__bar" style="width: 70%;"></div>
</div>

Animated Stripes

<div class="ui-progress ui-progress--striped ui-progress--animated" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
  <div class="ui-progress__bar" style="width: 50%;"></div>
</div>

Indeterminate

<!-- For unknown progress duration -->
<div class="ui-progress ui-progress--indeterminate" role="progressbar" aria-label="Loading">
  <div class="ui-progress__bar"></div>
</div>

Typed Custom Property

<!-- Set value via --ui-progress-value instead of inline width. The @property registration enables smooth CSS transitions when JS updates the value. -->
<div class="ui-flex ui-flex-col ui-gap-2">
  <div class="ui-progress" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
    <div class="ui-progress__bar" style="--ui-progress-value: 25%"></div>
  </div>
  <div class="ui-progress" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
    <div class="ui-progress__bar" style="--ui-progress-value: 75%"></div>
  </div>
</div>

Progress Circle: Default

<svg class="ui-progress-circle" style="--ui-progress-circle-value: 25" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
  <circle class="ui-progress-circle__track" cx="50" cy="50" r="45"></circle>
  <circle class="ui-progress-circle__fill" cx="50" cy="50" r="45"></circle>
</svg>
<svg class="ui-progress-circle" style="--ui-progress-circle-value: 50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
  <circle class="ui-progress-circle__track" cx="50" cy="50" r="45"></circle>
  <circle class="ui-progress-circle__fill" cx="50" cy="50" r="45"></circle>
</svg>
<svg class="ui-progress-circle" style="--ui-progress-circle-value: 75" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
  <circle class="ui-progress-circle__track" cx="50" cy="50" r="45"></circle>
  <circle class="ui-progress-circle__fill" cx="50" cy="50" r="45"></circle>
</svg>

Progress Circle: Sizes

<svg class="ui-progress-circle ui-progress-circle--sm" style="--ui-progress-circle-value: 50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
  <circle class="ui-progress-circle__track" cx="50" cy="50" r="45"></circle>
  <circle class="ui-progress-circle__fill" cx="50" cy="50" r="45"></circle>
</svg>
<svg class="ui-progress-circle" style="--ui-progress-circle-value: 50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
  <circle class="ui-progress-circle__track" cx="50" cy="50" r="45"></circle>
  <circle class="ui-progress-circle__fill" cx="50" cy="50" r="45"></circle>
</svg>
<svg class="ui-progress-circle ui-progress-circle--lg" style="--ui-progress-circle-value: 50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
  <circle class="ui-progress-circle__track" cx="50" cy="50" r="45"></circle>
  <circle class="ui-progress-circle__fill" cx="50" cy="50" r="45"></circle>
</svg>
<svg class="ui-progress-circle ui-progress-circle--xl" style="--ui-progress-circle-value: 50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
  <circle class="ui-progress-circle__track" cx="50" cy="50" r="45"></circle>
  <circle class="ui-progress-circle__fill" cx="50" cy="50" r="45"></circle>
</svg>

Progress Circle: Colors

<svg class="ui-progress-circle" style="--ui-progress-circle-value: 65" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100">
  <circle class="ui-progress-circle__track" cx="50" cy="50" r="45"></circle>
  <circle class="ui-progress-circle__fill" cx="50" cy="50" r="45"></circle>
</svg>
<svg class="ui-progress-circle ui-progress-circle--success" style="--ui-progress-circle-value: 65" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100">
  <circle class="ui-progress-circle__track" cx="50" cy="50" r="45"></circle>
  <circle class="ui-progress-circle__fill" cx="50" cy="50" r="45"></circle>
</svg>
<svg class="ui-progress-circle ui-progress-circle--warning" style="--ui-progress-circle-value: 65" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100">
  <circle class="ui-progress-circle__track" cx="50" cy="50" r="45"></circle>
  <circle class="ui-progress-circle__fill" cx="50" cy="50" r="45"></circle>
</svg>
<svg class="ui-progress-circle ui-progress-circle--danger" style="--ui-progress-circle-value: 65" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100">
  <circle class="ui-progress-circle__track" cx="50" cy="50" r="45"></circle>
  <circle class="ui-progress-circle__fill" cx="50" cy="50" r="45"></circle>
</svg>

Progress Circle: Indeterminate

<!-- For unknown progress duration -->
<svg class="ui-progress-circle ui-progress-circle--indeterminate" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" role="progressbar" aria-label="Loading">
  <circle class="ui-progress-circle__track" cx="50" cy="50" r="45"></circle>
  <circle class="ui-progress-circle__fill" cx="50" cy="50" r="45"></circle>
</svg>