Back to Components

Display

ProgressBar

Determinate or indeterminate progress. Pass a value for determinate; set indeterminate for the looping variant.

Examples

Determinate

42%
<ProgressBar value={0.42} />
<ProgressBar value={0.42} size="lg" />

Indeterminate

<ProgressBar indeterminate size="lg" />

Props

PropTypeDefaultDescription
valuenumber0Current value (0..max).
maxnumber1Maximum value.
indeterminatebooleanfalseRender the looping indeterminate variant.
size'sm' | 'md' | 'lg''md'Track height.
labelstringAccessible label for screen readers.

Install

CLI

npx @a3tai/mittsu add progress-bar