Circular progress
An accessible SVG progress dial, a native <progress> for assistive tech with
a stroked-circle visual on top. Used on folder fronts, but handy anywhere. Colour
comes from currentColor, so set it with a text colour utility.
25%
50%
75%
100%
Installation
npx shadcn@latest add https://canvas.blode.co/r/circular-progress.jsonUsage
import { CircularProgress } from "@/components/ui/circular-progress";
<CircularProgress className="size-14 text-canvas-folder-accent" value={75} />;Props
Accepts every div prop in addition to:
| Prop | Type | Default | Description |
|---|---|---|---|
| value* | number | — | Progress from 0–100 (clamped). |
| strokeWidth | number | 4 | Width of the progress ring stroke. |
| hideText | boolean | false | Hide the centered percentage label. |
| className | string | — | Sets the size (e.g. `size-14`) and colour. |