Progress
A horizontal bar that shows task completion, with determinate and indeterminate modes, labelled layouts, and smooth value transitions.
import { Progress } from "@plexui/ui/components/Progress";Examples
Overview
With label
3.2 / 4.8 MB
Controlled
API
Progress
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | null | null | Current progress between 0 and max. Pass null for indeterminate. |
max | number | 100 | Maximum progress value |
getValueLabel | (value: number, max: number) => string | — | Accessible value text (aria-valuetext). Defaults to the rounded percentage, e.g. "67%". |
className | string | — | Applied to the root <div> |
Built on Radix Progress. All Progress.Root props are forwarded.
Styling
Component tokens:
--progress-height: track height (defaults to4px)--progress-track-color: track background (defaults to--color-background-secondary-soft)--progress-indicator-color: fill color (defaults to--color-text)--progress-radius: corner radius (defaults to--radius-full)--progress-indeterminate-duration: sweep duration (defaults to1.5s)
Override at any scope to change the bar's look without subclassing.