ProgressRing shows a controlled percentage with accessible progressbar semantics. It can display a preformatted value beside the ring.
Usage
Supply a value from 0 to 100 and an accessible name. Usearia-valuetext when a formatted value explains progress more clearly than a percentage.
aria-labelledby to associate the ring with an existing visible label. The optional children display a value; they do not provide the ring’s accessible name.
Controlled progress
The application calculatesvalue and formats the displayed text. The ring does not fetch data, advance progress, or calculate quotas. Values outside 0 to 100 are bounded to that range, including infinite values. NaN renders as zero. Displayed children stay unchanged.
Use Loader for indeterminate loading, ProgressBar for horizontal progress, or MetricRow for a label and aligned value.
Appearance and motion
size="md" renders a 16px ring; size="sm" renders a 14px ring. Both use a 2px stroke and fill clockwise from the top. barColor accepts CSS colors, including theme variables.
Value changes animate for 300ms. The transition is disabled when the user prefers reduced motion. Native attributes, className, style, and ref target the outer progress element. render can replace that element while retaining the progress semantics.
Props
string
Accessible name identifying the measured operation.
string
ID of the visible label that names the measured operation.
string
Human-readable progress value when a percentage alone is insufficient.
string
CSS color of the filled arc. Defaults to the blue theme color.
ReactNode
Optional preformatted value displayed before the ring.
string
CSS class applied to the progress root.
ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>
Replaces the root element while preserving progress semantics.
"md" | "sm"
default:"md"
Ring diameter: sm (14px) or md (16px). Defaults to md.
CSSProperties
Inline styles applied to the progress root.
number
required
Controlled progress from 0 to 100. Out-of-range values are bounded and NaN renders as zero.