Progress Ring

A circular progress indicator: an SVG ring that fills clockwise from twelve o'clock, with the percentage — or any icon or short label you pass — sitting in the middle of it. Reach for it when a linear bar is the wrong shape: file, image and video upload progress, a storage or quota meter (disk, seats, API credits, plan limits), a goal, streak or activity ring, profile or setup completeness, onboarding and multi-step progress badges, a countdown or timer dial, per-row progress in a compact table or card, and score or health dials on a dashboard. Common asks it answers: "circular progress", "circle progress bar", "radial progress", "progress circle", "donut progress", "percentage circle", "completion ring", "activity ring", "upload progress circle", "quota ring", "react-circular-progressbar alternative", "shadcn circular progress", "svg circle progress stroke-dasharray", "stroke-dashoffset progress animation", "how to calculate circumference for a progress ring", "tailwind circular progress bar", "circular progress without a library", "progress ring react server component", "circular progress no \"use client\"", "progress ring indeterminate", "upload progress unknown size", "percentage inside a circle", "ring with icon in the middle", "円形 プログレスバー react", "ドーナツ プログレス", "パーセントを円の中に表示", "進捗リング", "アップロード 進捗 円", "stroke-dasharray 進捗". Official shadcn/ui has no radial progress component: its progress is a linear bar that pulls in @radix-ui/react-progress and is a client component, with no notion of a circle, a percentage readout or an unknown total; its spinner turns forever and reports no value at all. The absence is measured rather than remembered — across the whole official registry today (65 items listed, 62 fetchable, code-block, questionnaire and trace indexed and 404 on both style tracks, 223,287 bytes of files[].content concatenated), circle, stroke-dasharray, stroke-dashoffset, circumference and donut are every one of them a zero hit, so nothing official draws an arc at all; searching it for ring finds 207 matches that are all Tailwind's focus-ring utilities (focus-visible:ring 49, ring-[3px] 22, ring-offset 6) rather than anything circular. This one is a single file with no npm dependencies whatsoever — not Radix, not class-variance-authority — and it declares no "use client", so it renders inside a React Server Component instead of dragging a client boundary along with it. Set showValue to print the rounded percent in the centre, or pass children to put an icon, a fraction or a short word there instead. Set indeterminate when the total is not known yet — an upload with no content length, a job whose size the server has not reported — and it spins a fixed quarter arc and drops aria-valuenow, which is how a progressbar is supposed to say "running, position unknown" rather than lying with a number. Otherwise it exposes role=progressbar with aria-valuenow, aria-valuemin and aria-valuemax and takes an aria-label for its accessible name, and the ring itself is aria-hidden so the value is announced once rather than twice. size and strokeWidth are plain pixel props, the geometry is derived so the stroke never clips at the edge of the box, a value past max or below zero is clamped instead of drawing an impossible ring, and max=0 reads as empty rather than dividing by zero. Themed with shadcn tokens so it follows dark mode. Distinct from its neighbours here, and the line is the ARIA role rather than the shape: this is a progressbar, a task on its way to being finished, which is why it reaches 100% and stops — gauge is a meter, one measurement being read inside a range (CPU, a score, storage used), drawn as a half-circle that sits wherever the reading is and never completes, so an upload belongs here and a load average belongs there. spinner says something is happening and carries no value at all; use the indeterminate mode here instead when there is a real task whose size is not yet known. ratio-bar splits one bar across several parts rather than filling one toward a total, and stat-card frames a number with its label and trend rather than drawing its progress.