Circular Progress

An animated percentage ring progress / gauge, supporting gradients, gauge arcs, and a counting reveal.

Shows progress as an SVG ring, with the arc and the central number advancing on a single synchronized animation beat, supporting either a full ring or a gauge.

Loading preview…

npx shadcn@latest add https://webberui.com/r/circular-progress.json

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Progress valuevalue

Sizesize

160

Line widthstrokeWidth

Arc spanarc

360

Round line capsrounded

Soft-light effectglow

<CircularProgress />

Installation

npx shadcn@latest add https://webberui.com/r/circular-progress.json

Or, once registries are configured in components.json, install it as @webberui/circular-progress.

Usage

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

<CircularProgress value={72} />;

To make a gauge: set arc to less than 360, then use startAngle to align the direction of the opening.

<CircularProgress value={86} arc={270} startAngle={135} />;

Props

Prop	Type	Default	Description
`value`	`number`	—	Progress percentage (0 to 100)
`size`	`number`	`160`	Component side length (px)
`strokeWidth`	`number`	`12`	Ring stroke width (px)
`color`	`string \| string[]`	cyan-indigo-magenta gradient	A single color string, or an array for a gradient along the arc
`trackColor`	`string`	low-opacity `currentColor`	Track color
`arc`	`number`	`360`	Total span of the arc (degrees); anything below `360` makes it a gauge
`startAngle`	`number`	`-90`	Start angle (degrees); `-90` is straight up
`duration`	`number`	`1.2`	Duration of the reveal animation (seconds)
`delay`	`number`	`0`	Delay before the reveal starts (seconds)
`rounded`	`boolean`	`true`	Whether the end caps are rounded
`showValue`	`boolean`	`true`	Whether to show the central percentage number
`decimals`	`number`	`0`	Decimal places of the number
`suffix`	`string`	`"%"`	Suffix after the number
`glow`	`boolean`	`false`	Adds a soft glow in the same color to the progress arc
`children`	`ReactNode`	—	Custom central content, replacing the default number

Accessibility

When the user has "reduce motion" enabled at the system level, it renders at the final value directly, without playing the counting or sweeping animation
The svg carries role="img" and an aria-label, announcing the current percentage