Progress Ring

Blocks & Slices

A circular SVG progress ring whose rounded-cap gradient arc (violet → fuchsia) sweeps to its value by transitioning stroke-dashoffset in pure CSS over a dim track, with a centred percentage or custom label and real progressbar/aria-value semantics. Under prefers-reduced-motion the sweep is disabled and the ring draws statically at its final value.

Inspired by Watermelon UI — progress ring — independently built, not affiliated. Attribution policy

72%

90score

Installation

npx shadcn@latest add https://parable-three.vercel.app/r/progress-ring.json

Runs the shadcn CLI — the component source is copied intocomponents/parable/progress-ring.tsx. You own it from there.

Usage

The exact code rendering the preview above.

<div className="flex items-center gap-8 text-white">
    <ProgressRing value={72} size={132} />
    <ProgressRing value={90} size={132} colors={["#22d3ee", "#8b5cf6"]}>
      <div className="flex flex-col items-center gap-1">
        <Zap className="size-5 text-cyan-300" aria-hidden />
        <span className="text-2xl font-semibold tabular-nums leading-none">90</span>
        <span className="text-[10px] uppercase tracking-[0.18em] text-white/45">score</span>
      </div>
    </ProgressRing>
  </div>

Props

ProgressRingProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children">

Prop	Type	Default	Description
value*	number	—	Progress amount; clamped to 0–100.
size	number	120	Outer diameter in px.
thickness	number	—	Stroke width in px. Defaults to ~`size / 12`.
colors	[string, string]	["#8b5cf6", "#ec4899"]	Two hex stops for the gradient stroke (start → end).
trackColor	string	"rgba(255,255,255,0.1)"	Colour of the unfilled track ring behind the progress arc.
showValue	boolean	true	Render the rounded percentage in the centre when no `children` are given.
children	React.ReactNode	—	Custom centred label (node); overrides the percentage when present.