Progress Ring
Animated SVG circular progress indicator with gradient and glow variants.
Preview
Interactive Preview
72%
48%
91%
33%
Installation
Usage
tsx
import { ProgressRing } from "@/components/ui/progress-ring"
export default function Demo() {
return (
<div className="flex gap-8">
<ProgressRing value={72} label="CPU" variant="glow" />
<ProgressRing value={48} label="Memory" variant="gradient" color="#ec4899" />
</div>
)
}Props
| Prop | Type | Default |
|---|---|---|
| value | number | - |
| max | number | 100 |
| size | number | 120 |
| strokeWidth | number | 10 |
| color | string | - |
| label | string | - |
| showValue | boolean | true |
| variant | "default""gradient""glow" | default |