Components › Feedback
Progress circle
A ring that fills to a value, with the percentage or your own content inside.
Installation
npx plankui@latest add progress-circleUsage
import { ProgressCircle } from "@/components/ui/progress-circle";
<ProgressCircle value={72} size={96} label="Storage used" />API reference
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | required | 0 to 100. |
| size / thickness | number | 96 / 8 | Pixels. |
| tone | "accent" | "success" | "warning" | "danger" | "accent" | Fill colour. |