Gradient circular progress with an animated dash offset and centred value.
1,520
Bookmarks
5,800
Installs
41,200
Views
import { ProgressRing } from "@/components/ui/progress-ring"
export default function DemoProgressRing() {
return (
<div className="flex min-h-[260px] items-center justify-center gap-8">
<ProgressRing value={72} label="Coverage" />4 more lines behind a plan
Previews are free to watch. Reading and copying the full source needs a plan.
See plansThat's all 6 components
Part of Amara Viz — browse the full library on Nuxus.