"use client"; import { useEffect, useId, useRef, useState } from "react"; import { useInView } from "motion/react"; import { cn, prefersReducedMotion } from "@/lib/utils"; export interface ProgressRingProps { /** Target percentage (0–100). */ value?: number; size?: number; stroke?: number; className?: string; } /** * ProgressRing — a radial progress dial that eases from 0 to its value the * first time it scrolls into view, with a gradient arc and a live percentage. */ export function ProgressRing({ value = 72, size = 120, stroke = 10, className, }: ProgressRingProps) { const gradId = useId(); const ref = useRef(null); const inView = useInView(ref, { once: true, amount: 0.5 }); const [display, setDisplay] = useState(0); useEffect(() => { if (!inView) return; const duration = prefersReducedMotion() ? 0 : 1200; const start = performance.now(); let raf = 0; const tick = (now: number) => { const p = duration <= 0 ? 1 : Math.min(1, (now - start) / duration); const eased = 1 - Math.pow(1 - p, 3); setDisplay(value * eased); if (p < 1) raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, [inView, value]); const radius = (size - stroke) / 2; const circumference = 2 * Math.PI * radius; const offset = circumference * (1 - display / 100); return (

{Math.round(display)}%

); }

Prop	Type	Default	Description
`value`	`number`	`72`	Target percentage (0–100). Eases up on view.
`size`	`number`	`120`	Diameter in pixels.
`stroke`	`number`	`10`	Ring thickness in pixels.
`className`	`string`	`—`	Extra classes.

Progress Ring

Customize

Props