Animated circular gauge
Circular gauge that animates its fill to a target percentage, useful for a skills/completion widget or a dashboard KPI card. Set gaugePrimaryColor to the brand accent so it does not default to indigo.
Live preview
open in new tab ↗"use client"
import { useEffect, useState } from "react"
import { AnimatedCircularProgressBar } from "@/components/magicui/animated-circular-progress-bar"
export function AnimatedCircularProgressBarDemo() {
const [value, setValue] = useState(72)
return (
<AnimatedCircularProgressBar
value={value}
gaugePrimaryColor="rgb(79 70 229)"
gaugeSecondaryColor="rgba(0, 0, 0, 0.1)"
/>
)
}Block id: magicui-animated-circular-progress-barreact-tailwind · swap-content
More stats blocks
Want the whole site, not just the block?
We ship real client sites in 3 weeks — with blocks like this one, wired to your brand.