Circular Progress
Show progress as a circular indicator.
Preview
Import
import { CircularProgress } from "@sigil-ui/components";Usage
<div className="flex items-center gap-6">
<CircularProgress value={25} />
<CircularProgress value={50} />
<CircularProgress value={75} />
<CircularProgress value={100} />
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | — | Progress value between 0 and 100. Omit for indeterminate. |
size | number | 40 | Diameter in pixels. |
strokeWidth | number | 4 | Stroke width in pixels. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-border | Border |
--s-primary | Primary |
--s-duration-normal | Duration normal |