Progress
A horizontal bar that shows task completion, with determinate and indeterminate modes, labelled layouts, and smooth value transitions.
import { Progress } from "@plexui/vue/components/Progress";Examples
Overview
With label
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 |
get-value-label | (value: number, max: number) => string | Accessible value text (aria-valuetext). Defaults to the rounded percentage, e.g. "67%". | |
class | string | Applied to the root <div> |
Built on Reka UI Progress. Other attributes are forwarded to the root <div>.
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.