Progress Bar

<ProgressBar value={75} />

Installation

npx dotui-cli@latest add progress

Anatomy

import { ProgressBar } from "@/components/core/progress-bar";
 
<ProgressBar value={30} />;

import { Label } from "@/components/core/field";
import {
  ProgressBarRoot,
  ProgressBarValueLabel,
  ProgressBarIndicator,
} from "@/components/core/progress-bar";
 
<ProgressBarRoot value={30}>
  <div className="flex items-center justify-between gap-2">
    <Label>Progress</Label>
    <ProgressBarValueLabel />
  </div>
  <ProgressBarIndicator />
</ProgressBarRoot>;

Visual options

Variant

Use the variant prop to control the visual style of the Progress. The default variant is "default".

<ProgressBar variant="primary" />
<ProgressBar variant="success" />
<ProgressBar variant="accent" />
<ProgressBar variant="danger" />
<ProgressBar variant="warning" />

Size

Use the size prop to control the size of the Progress. The default variant is "md".

<ProgressBar size="sm" />
<ProgressBar size="md" />
<ProgressBar size="lg" />

Labelling

Label

A visual label can be provided using the label prop, or a hidden label using aria-label prop.

<ProgressBar aria-label="loading" />
<ProgressBar label="loading..." />

Value label

Set the showValueLabel prop to true to display the current value of the progress bar.

<ProgressBar label="Loading" showValueLabel value={75} />

Format options

Values are formatted as a percentage by default, but this can be modified by using the formatOptions prop to specify a different format.

<Progress
  label="Sending…"
  showValueLabel
  formatOptions={{ style: "currency", currency: "JPY" }}
  value={60}
/>

Custom value label

The valueLabel prop allows the formatted value to be replaced with a custom string.

<Progress
  label="Feeding…"
  showValueLabel
  valueLabel="30 of 100 dogs"
  value={30}
/>

Value

Value scale

A custom value scale can be used by setting the minValue and maxValue props.

<Progress
  aria-label="Min and max values"
  minValue={50}
  maxValue={150}
  value={100}
/>

Indeterminate

The isIndeterminate prop can be used to represent an interdeterminate operation.

<ProgressBar isIndeterminate aria-label="Loading" />

Duration

Use the duration prop to indicate an approximate duration of an indeterminate task. Once the duration times out, the progress bar will start an indeterminate animation.

<ProgressBar duration="30s" />

Composition

If you need to customize things further, you can drop down to the composition level.

<ProgressBarRoot value={50} className="flex-row items-center gap-4">
  <Label>Progress</Label>
  <ProgressBarIndicator />
  <ProgressBarValueLabel />
</ProgressBarRoot>

API Reference