Progress Circle

Circular progress: a ring that glides to each value, or spins while waiting. Free, MIT · Basics › Loading

A circular progress indicator with ProgressBar's API: a determinate arc that glides to each value, or an indeterminate spinning arc. Rest props, ref and ARIA go to the root, which is the progressbar.

Installation

npx valyro-cli@latest add progress-circle

npx shadcn@latest add https://valyro.xyz/r/progress-circle.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { ProgressCircle } from 'valyro-ui';

Props

Prop	Type	Default
`value`	`number`		Omit (or pass a non-finite number) for an indeterminate ring.
`max`	`number`	`100`	Value of a full ring; `value` is clamped to 0…max. A non-positive or non-finite max falls back to 100.
`size`	`'sm' \| 'md' \| 'lg' \| number`	`'md'`	Diameter: `sm` 24px, `md` 40px, `lg` 64px, or a number of pixels.
`thickness`	`number`		Ring width in pixels. Default: the theme's share of the diameter (`--ui-progress-circle-thickness`, 10 %).
`color`	`'accent' \| 'success' \| 'warning' \| 'danger' \| 'neutral'`	`'accent'`	Ring colour: the theme accent, a status colour, or the foreground (`neutral`).
`label`	`ReactNode`		Caption under the ring; also names the progressbar unless `aria-label` is given.
`hideLabel`	`boolean`	`false`	Keep `label` as the accessible name only, without showing it.
`showValue`	`boolean \| ReactNode`		Text in the centre: `true` shows the formatted value, a node shows itself (e.g. "3/5"), `false` nothing. Default: the value on `md` and larger rings, nothing on `sm`.
`formatValue`	`(value: number, max: number) => string`		Custom value text (shown and announced), e.g. "3 of 8 files".
`locale`	`string`		Locale for the percentage (default: the ThemeProvider's, then the browser's).
`animation`	`'default' \| 'spring'`	`'default'`	`spring`: the arc springs to each new value and the shown number counts along with it. `default`: the theme's ease.

Related components

Skeleton — Loading placeholders
Spinner — Loading indicator
Progress Bar — Progress bars
Button — Buttons in every variant
Icon Button — Icon-only button
Color Mode Switch — Light, dark or system: the choice is saved, painted before the first frame, synced across tabs and cross-faded
Button Group — Grouped buttons
Copy to Clipboard — Copy with confirmation
Badge — Status labels and tags
Tag — Removable and clickable tags, groups with +N
Avatar — User avatars
Tooltip — Hover and focus hints

Previous: Progress Bar · Next: App Shell · All Basics