We are live on DevHunt: tool of the week contest

check it out

Progress Ring

Animated SVG circular progress indicator with gradient and glow variants.

Preview

Interactive Preview
72%
CPU
48%
Memory
91%
Storage
33%
Network

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

PropTypeDefault
valuenumber-
maxnumber100
sizenumber120
strokeWidthnumber10
colorstring-
labelstring-
showValuebooleantrue
variant
"default""gradient""glow"
default