Feedback

Circular progress

A radial progress ring with an optional percentage in the center, in four status colors and any pixel size.

Source: src/components/ui/circular-progress.tsx
Figma: CircularProgress · status (default, success, warning, error, indeterminate). In code there is no indeterminate status; use Spinner for that.

Usage

Included in the GliaKit boilerplate. Import it where you need it:

tsx

import { CircularProgress } from "@/components/ui/circular-progress";

A single completion metric in a card or stat tile: onboarding steps, goal reached, quota used.
Compact places where a full-width bar does not fit.

For lists of comparable values, use Progress rows: lengths are easier to compare than arcs.
When the duration is unknown, use Spinner.

Default, success, warning and error colors.

Set size and strokeWidth in pixels. Hide the label when the ring is small.

Value changes animate. Switch to success when it reaches 100.

A small ring next to visible text, which also gives screen readers the context.

Accepts only the props below (no native attribute spread).

Prop	Type	Default	Description
value	number	-	Required. 0 to 100, clamped. Changes animate over 500ms.
size	number	72	Width and height in pixels.
strokeWidth	number	8	Ring thickness in pixels.
status	"default" \| "success" \| "warning" \| "error"	"default"	Ring color: primary, diff-add, warning or destructive.
showLabel	boolean	true	Shows the rounded percentage in the center.
className	string	-	Merged onto the wrapper.

The wrapper has role="progressbar" with aria-valuenow (rounded), aria-valuemin=0 and aria-valuemax=100.
It takes no aria-label prop, so the progressbar has no accessible name. Put a visible caption next to it, or add an aria-label prop in your copy of the component.
Status colors are not announced; state warnings and errors in text.