Components
Circular Progress
A circular SVG progress indicator that displays task completion, supports step-based progress, size and color variants, an indeterminate spinning state, and an optional center label slot.
Source code
Click to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.
Installation
Usage
Basic
A simple progress indicator. The progress prop accepts a value between 0 and 1.
Sizes
Five size presets are available: xs, sm, default, lg, and xl. Each preset sets a sensible radius and stroke width. You can override either with the radius and stroke-width props.
Colors
The color prop accepts default, secondary, success, warning, or destructive. All colors map to semantic design tokens so they automatically adapt to the active theme.
Step-based progress
Pass current-step and total-steps to drive progress from a wizard or multi-step flow. The value is automatically clamped to [0, 1].
Step 2 of 5
Indeterminate
Set indeterminate when the progress is unknown. The SVG spins and the component switches to role="status" with an aria-label of "Loading".
Custom label
The default slot renders centered inside the circle. Use it for icons, text, or any custom content. The show-value prop is a convenience shorthand that renders the percentage when no slot is provided.