Components

Progress

A flat progress bar: a thin track holding an accent-colored fill whose width is set inline. Status modifiers recolor the bar, an indeterminate mode animates a sliding segment, and an optional label row carries a tabular percentage.

Determinate

The fill width is set with an inline style="width: …%" on the bar.

Track + bar

<div class="ds-progress" role="progressbar"
     aria-valuemin="0" aria-valuemax="100" aria-valuenow="35">
  <div class="ds-progress__bar" style="width:35%"></div>
</div>

With label & status

A __label row above pairs a caption with a tabular __value. Status modifiers recolor the bar.

Label + success / warning / danger

Uploading export62%

<div class="ds-progress__label">
  <span>Uploading export</span><span class="ds-progress__value">62%</span>
</div>
<div class="ds-progress ds-progress--success" role="progressbar"
     aria-valuemin="0" aria-valuemax="100" aria-valuenow="62">
  <div class="ds-progress__bar" style="width:62%"></div>
</div>

Indeterminate

When the total isn’t known, --indeterminate animates a segment sliding across the track (slows under reduced-motion).

.ds-progress--indeterminate

<div class="ds-progress ds-progress--indeterminate" role="progressbar"
     aria-valuemin="0" aria-valuemax="100" aria-label="Loading">
  <div class="ds-progress__bar"></div>
</div>

React

The <Progress> component derives the percentage and ARIA values from value/max.

import { Progress } from "@diametral/design-system/react";

<Progress value={62} label="Uploading export" status="success" />
<Progress value={3} max={5} />
<Progress indeterminate label="Syncing" />