Progress Ring

1"use client";2
3import React, { useEffect, useId, useLayoutEffect, useRef, useState } from "react";4import {5  motion,6  useMotionValue,7  useReducedMotion,8  useTransform,9  animate,10} from "motion/react";11import { cn } from "@/lib/utils";12
13export type ProgressRingProps = {14  value: number;15  size?: number;16  strokeWidth?: number;17  label?: string;18  className?: string;19};20
21const SPRING = { type: "spring" as const, bounce: 0, duration: 0.3 };22
23function DigitReadout({24  value,25  className,26}: {27  value: string;28  className?: string;29}) {30  const groupRef = useRef<HTMLSpanElement>(null);31  const [animating, setAnimating] = useState(true);32  const chars = value.split("");33
34  useLayoutEffect(() => {35    const el = groupRef.current;36    if (!el) return;37    setAnimating(false);38    void el.offsetHeight;39    setAnimating(true);40  }, [value]);41
42  return (43    <span44      ref={groupRef}45      className={cn("t-digit-group", animating && "is-animating", className)}46    >47      {chars.map((ch, i) => {48        const fromEnd = chars.length - 1 - i;49        const stagger =50          fromEnd === 1 ? "1" : fromEnd === 0 ? "2" : undefined;51        return (52          <span53            key={`${i}-${ch}`}54            className="t-digit"55            {...(stagger ? { "data-stagger": stagger } : {})}56          >57            {ch}58          </span>59        );60      })}61    </span>62  );63}64
65export function ProgressRing({66  value,67  size = 96,68  strokeWidth = 8,69  label,70  className,71}: ProgressRingProps) {72  const reduce = useReducedMotion();73  const uid = useId();74  const clamped = Math.min(100, Math.max(0, value));75  const r = (size - strokeWidth) / 2;76  const c = 2 * Math.PI * r;77  const progress = useMotionValue(reduce ? clamped : 0);78  const offset = useTransform(progress, (v) => c - (v / 100) * c);79  const display = useTransform(progress, (v) => Math.round(v));80
81  useEffect(() => {82    if (reduce) {83      progress.set(clamped);84      return;85    }86    const controls = animate(progress, clamped, SPRING);87    return () => controls.stop();88  }, [clamped, progress, reduce]);89
90  const [pct, setPct] = React.useState(clamped);91  useEffect(() => display.on("change", (v) => setPct(v)), [display]);92
93  // Pop the center digits when the target value changes (not every spring tick)94  const displayValue = label ?? `${Math.round(clamped)}%`;95
96  return (97    <div98      className={cn(99        "relative inline-flex items-center justify-center",100        className,101      )}102      style={{ width: size, height: size }}103      role="progressbar"104      aria-valuenow={pct}105      aria-valuemin={0}106      aria-valuemax={100}107      aria-label={label ?? "Progress"}108    >109      <svg width={size} height={size} className="-rotate-90">110        <circle111          cx={size / 2}112          cy={size / 2}113          r={r}114          fill="none"115          stroke="var(--color-rule)"116          strokeWidth={strokeWidth}117        />118        <motion.circle119          cx={size / 2}120          cy={size / 2}121          r={r}122          fill="none"123          stroke="var(--color-ink)"124          strokeWidth={strokeWidth}125          strokeLinecap="round"126          strokeDasharray={c}127          style={{ strokeDashoffset: offset }}128        />129      </svg>130      {label ? (131        <span132          id={uid}133          className="absolute text-sm font-semibold tabular-nums text-[var(--color-ink)]"134        >135          {label}136        </span>137      ) : (138        <DigitReadout139          value={displayValue}140          className="absolute text-sm font-semibold tabular-nums text-[var(--color-ink)]"141        />142      )}143    </div>144  );145}