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 — Base UI
progress-circle.tsx
1234567891011121314151617181920212223242526272829import { ProgressCircle } from "#components/ui/base-ui/progress-circle.tsx";import { indigoPalette } from "@stylexblocks/ui/themes/palettes.ts";
export function Example() { const value = 64; return ( // size resolves once on Root; parts inherit it via context and expose // data-size attributes, composing via `render`. 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> );}