All components
Progress Circle
Circular determinate progress with a track, range, and centered value text.
64%
Sizes
64%
xs64%
sm64%
md64%
lg64%
xlInstall
zsh — progress-circle
1bunx stylexblocks add progress-circleUsage — Ark UI
progress-circle.tsx
12345678910111213141516171819202122232425262728import { ProgressCircle } from "#components/ui/ark-ui/progress-circle.tsx";import { indigoPalette } from "@stylexblocks/ui/themes/palettes.ts";
export function Example() { const value = 64; return ( // size resolves once on Root; every part inherits it via context. The // component carries the ring geometry — give both circles // pathLength={100} and express the value as strokeDasharray. <ProgressCircle.Root size="lg" palette={indigoPalette} role="progressbar" aria-valuenow={value} aria-valuemin={0} aria-valuemax={100} > <ProgressCircle.Circle aria-hidden="true"> <ProgressCircle.CircleTrack pathLength={100} /> <ProgressCircle.CircleRange pathLength={100} strokeDasharray={`${value} 100`} /> </ProgressCircle.Circle> <ProgressCircle.ValueText>{value}%</ProgressCircle.ValueText> </ProgressCircle.Root> );}