Circular Progress

Ring progress indicator. Filled and gradient arcs across eleven colors, with a built-in indeterminate spinner — the circular counterpart of Progress.

CircularProgress is the ring counterpart of Progress — same Ark UI machine (so role="progressbar", the aria-value* wiring, and indeterminate come for free), same variant × color axes. The arc is a stroked SVG circle, so it clips cleanly at any size.

import { CircularProgress } from '@42/ui-react/circular-progress';

<CircularProgress value={65} />
<CircularProgress variant="gradient" value={70} />
<CircularProgress value={80}>80%</CircularProgress>
<CircularProgress value={null} /> {/* indeterminate */}

Playground

Component

Dir

Presets

Code

<Component size="lg" value={65} />

Full prop browser

object

Variants

Two arc treatments. filled (default) routes through the palette; gradient paints its own stops.

Code

<CircularProgress variant="filled" value={65} /><CircularProgress variant="gradient" value={65} />

Colors

Any palette color pairs with the filled variant via the kit's data-color system.

Code

<CircularProgress color="green" value={70} /><CircularProgress color="orange" value={45} /><CircularProgress color="red" value={20} />

Gradient

Like the linear Progress bar, the gradient is fixed to the whole ring and the arc reveals it — so the complete from→to only shows once the ring closes at 100%. Pass a gradient config (from / to / via) to customize the stops (dir is ignored — the SVG sweep runs top-left → bottom-right).

Code

<CircularProgress variant="gradient" value={40} /><CircularProgress variant="gradient" value={70} /><CircularProgress variant="gradient" value={100} />

Sizes

Five diameters, matching the kit's xs–xl scale. Override the stroke width with thickness.

Code

<CircularProgress size="xs" value={65} /><CircularProgress size="sm" value={65} /><CircularProgress size="md" value={65} /><CircularProgress size="lg" value={65} /><CircularProgress size="xl" value={65} />

Label

Pass children to render centered content — typically a percentage readout.

80%

Code

<CircularProgress value={80} size="xl" color="green"><span className="text-sm font-mono font-medium">80%</span></CircularProgress>

Indeterminate

When you can't measure progress, pass value={null} — a fixed arc spins (disabled under the OS "reduce motion" setting, where it rests in place). Toggling indeterminate on or off morphs the arc between the value and the spinner rather than snapping — toggle it in the playground to see it.

Code

<CircularProgress value={null} />

API

Prop

Type

All other props are forwarded to the underlying Ark Progress.Root.

Accessibility

Ark stamps role="progressbar" plus aria-valuenow / aria-valuemin / aria-valuemax on the ring. In the indeterminate state aria-valuenow is dropped. Provide an aria-label so the control names what it tracks:

<CircularProgress value={uploaded} aria-label="Upload progress" />

Progress

Linear progress bar. Filled and gradient fills across eleven colors, with a built-in indeterminate state — wraps Ark UI's Progress machine for ARIA wiring.

Card

Bordered surface for grouped content. Compose variant and color to express semantic meaning.

Circular Progress

On this page