Canarist UI

Progress

Horizontal progress bar with variants, sizes, and indeterminate mode.

Variants

import { Progress } from '@canarist/ui'

<Progress value={65} variant="accent" />
<Progress value={80} variant="success" />
<Progress value={45} variant="warning" />
<Progress value={30} variant="error" />
<Progress value={55} variant="info" />

Sizes

<Progress value={60} size="sm" />
<Progress value={60} size="md" />

Indeterminate

<Progress indeterminate label="Loading…" />

Reference

PropTypeDefaultDescription
valuenumber0Progress percentage (0–100).
variant'accent' | 'success' | 'warning' | 'error' | 'info''accent'Color of the filled bar.
size'sm' | 'md''md'Height of the bar.
indeterminateboolean—Show animated indeterminate state.
labelstring—Accessible aria-label for the progressbar.
classNamestring—Additional CSS classes.