FX · Feedback

A circular progress indicator, determinate or spinning.

bash
npx shadcn@latest add https://www.rad-ui.com/r/progress-ring.json
React
import ProgressRing from "@/components/fx/progress-ring"

<ProgressRing value={progress} label="Uploading report.pdf" />
<ProgressRing label="Connecting" />  {/* indeterminate */}
  • role="progressbar" with aria-valuenow, or no value while indeterminate; requires a `label`.
  • The percentage text is aria-hidden because the value is already exposed.
  • prefers-reduced-motion: reduce (or data-rad-fx-motion="reduce" on an ancestor) turns the spinner into a gentle pulse, so "busy" still reads.
PropTypeDefaultDescription
value
number
—

0–100; omit for indeterminate.

label
string
—

Accessible name.

size
number
96

Diameter in px.

thickness
number
8

Ring thickness in px.

showValue
boolean
true

Show the percentage.

color
string
'#a78bfa'

Ring colour.

Edit this page on GitHub →