Progress Ring Check

1"use client";2
3import { useEffect, useLayoutEffect, useRef, useState } from "react";4import type { CSSProperties, ReactNode } from "react";5import { animate, useMotionValue, useReducedMotion } from "motion/react";6
7export type ProgressRingCheckStatus = "pending" | "running" | "done" | "failed" | "cancelled";8
9export type ProgressRingCheckProps = {10  status?: ProgressRingCheckStatus;11  progress?: number;12  label?: ReactNode;13  color?: string;14  doneColor?: string;15  errorColor?: string;16  size?: number;17  strokeWidth?: number;18  dashes?: number;19  fontSize?: number;20  spinDuration?: number;21  arcLength?: number;22  drawDuration?: number;23  fillOpacity?: number;24  strike?: boolean;25  strikeDelay?: number;26  className?: string;27  style?: CSSProperties;28};29
30const UI = { type: "spring" as const, duration: 0.3, bounce: 0 };31const MORPH = { duration: 0.3, ease: [0.77, 0, 0.175, 1] as [number, number, number, number] };32const CHECK = "M7.5 12.25 10.5 15.25 16.75 8.75";33const CROSS = "M8.5 8.5 15.5 15.5M15.5 8.5 8.5 15.5";34const TEXT: Record<ProgressRingCheckStatus, string> = {35  pending: "Pending",36  running: "In progress",37  done: "Completed",38  failed: "Failed",39  cancelled: "Cancelled",40};41const IDLE_DASH = 0.3;42const STYLE = "@keyframes prc-breathe{50%{opacity:.45}}";43
44const clamp01 = (value: number) => Math.min(1, Math.max(0, value));45
46export function ProgressRingCheck({47  status = "pending",48  progress,49  label,50  color = "currentColor",51  doneColor = "#22c55e",52  errorColor = "#ef4444",53  size = 20,54  strokeWidth = 2,55  dashes = 8,56  fontSize = 14,57  spinDuration = 1100,58  arcLength = 0.68,59  drawDuration = 240,60  fillOpacity = 0.06,61  strike = true,62  strikeDelay = 60,63  className = "",64  style,65}: ProgressRingCheckProps) {66  const reduce = useReducedMotion();67  const r = 10 - strokeWidth / 2;68  const C = 2 * Math.PI * r;69  const P = C / Math.max(1, dashes);70  const determinate = status === "running" && typeof progress === "number" && Number.isFinite(progress);71  const indeterminate = status === "running" && !determinate;72  const solid = status === "running" || status === "done" || status === "failed";73  const targetArc = indeterminate ? arcLength : determinate ? clamp01(progress as number) : 1;74
75  const mode = useMotionValue(solid ? 1 : 0);76  const arc = useMotionValue(targetArc);77  const travel = useMotionValue(0);78  const ringRef = useRef<SVGCircleElement>(null);79  const geo = useRef({ C, P });80  const gen = useRef(0);81
82  const writeDash = () => {83    const g = geo.current;84    const m = mode.get();85    const a = arc.get();86    const dash = IDLE_DASH * g.P + (a * g.C - IDLE_DASH * g.P) * m;87    const gap = (1 - IDLE_DASH) * g.P + ((1 - a) * g.C - (1 - IDLE_DASH) * g.P) * m;88    ringRef.current?.setAttribute("stroke-dasharray", `${Math.max(0, dash)} ${Math.max(0, gap)}`);89  };90
91  useLayoutEffect(() => {92    geo.current = { C, P };93    writeDash();94    ringRef.current?.setAttribute("stroke-dashoffset", String(travel.get()));95    // eslint-disable-next-line react-hooks/exhaustive-deps96  }, [C, P]);97
98  useEffect(() => {99    const offs = [100      mode.on("change", writeDash),101      arc.on("change", writeDash),102      travel.on("change", (value: number) => ringRef.current?.setAttribute("stroke-dashoffset", String(value))),103    ];104    return () => {105      offs.forEach((off) => off());106      mode.stop();107      arc.stop();108      travel.stop();109    };110    // eslint-disable-next-line react-hooks/exhaustive-deps111  }, []);112
113  useEffect(() => {114    const g = ++gen.current;115    if (reduce) {116      mode.jump(solid ? 1 : 0);117      arc.jump(targetArc);118      travel.jump(0);119      return;120    }121    if (mode.get() === 0) arc.jump(targetArc);122    animate(mode, solid ? 1 : 0, MORPH);123    animate(arc, targetArc, UI);124    if (indeterminate) {125      const t0 = travel.get();126      animate(travel, [t0, t0 - C], { duration: spinDuration / 1000, ease: "linear", repeat: Infinity });127      return;128    }129    const unit = determinate ? C : P;130    const to = Math.floor(travel.get() / unit) * unit;131    animate(travel, to, UI).then(() => {132      if (gen.current === g) travel.jump(0);133    });134    // eslint-disable-next-line react-hooks/exhaustive-deps135  }, [status, determinate, targetArc, reduce, C, P, spinDuration]);136
137  const spoken = TEXT[status] + (determinate ? `, ${Math.round(clamp01(progress as number) * 100)}%` : "");138  const hasLabel = label !== undefined && label !== null;139
140  return (141    <span142      className={`group relative inline-flex items-center align-middle leading-none [gap:calc(var(--prc-size)*0.5)]${className ? ` ${className}` : ""}`}143      data-status={status}144      data-indeterminate={indeterminate ? "" : undefined}145      data-strike={strike ? "" : undefined}146      style={147        {148          "--prc-size": `${size}px`,149          "--prc-stroke": strokeWidth,150          "--prc-color": color,151          "--prc-done": doneColor,152          "--prc-error": errorColor,153          "--prc-fill": fillOpacity,154          "--prc-font": `${fontSize}px`,155          "--prc-draw": `${drawDuration}ms`,156          "--prc-strike-delay": `${120 + strikeDelay}ms`,157          "--prc-check-delay": "120ms",158          ...style,159        } as CSSProperties160      }161    >162      <style>{STYLE}</style>163      <svg164        className="shrink-0 overflow-visible [color:var(--prc-color)] [transition:color_200ms_ease] group-data-[status=done]:[color:var(--prc-done)] group-data-[status=failed]:[color:var(--prc-error)]"165        viewBox="0 0 24 24"166        width={size}167        height={size}168        role={hasLabel ? undefined : "img"}169        aria-label={hasLabel ? undefined : spoken}170        aria-hidden={hasLabel || undefined}171      >172        <circle className="[fill:currentColor] [stroke:currentColor] [stroke-width:var(--prc-stroke)] [fill-opacity:0] [stroke-opacity:0] [transition:fill-opacity_180ms_ease,stroke-opacity_200ms_ease] group-data-[status=running]:[stroke-opacity:0.2] group-data-[status=done]:[fill-opacity:var(--prc-fill)] group-data-[status=failed]:[fill-opacity:var(--prc-fill)]" cx="12" cy="12" r={r} transform="rotate(-90 12 12)" />173        <circle ref={ringRef} className="fill-none [stroke:currentColor] [stroke-width:var(--prc-stroke)] [stroke-linecap:round] opacity-[0.55] [transition:opacity_200ms_ease] group-data-[status=running]:opacity-100 group-data-[status=done]:opacity-100 group-data-[status=failed]:opacity-100 motion-reduce:group-data-[indeterminate]:animate-[prc-breathe_1400ms_cubic-bezier(0.77,0,0.175,1)_infinite]" cx="12" cy="12" r={r} transform="rotate(-90 12 12)" />174        <path className="fill-none [stroke:currentColor] [stroke-width:var(--prc-stroke)] [stroke-linecap:round] [stroke-linejoin:round] [stroke-dasharray:1_2] [stroke-dashoffset:1.05] opacity-0 [transition:stroke-dashoffset_160ms_cubic-bezier(0.23,1,0.32,1),opacity_0ms_linear_160ms] motion-reduce:[stroke-dashoffset:0] motion-reduce:[transition:opacity_200ms_ease] group-data-[status=done]:[stroke-dashoffset:0] group-data-[status=done]:opacity-100 group-data-[status=done]:[transition:stroke-dashoffset_var(--prc-draw)_cubic-bezier(0.23,1,0.32,1)_var(--prc-check-delay),opacity_0ms_linear_var(--prc-check-delay)] motion-reduce:group-data-[status=done]:[transition:opacity_200ms_ease]" d={CHECK} pathLength="1" />175        <path className="fill-none [stroke:currentColor] [stroke-width:var(--prc-stroke)] [stroke-linecap:round] [stroke-linejoin:round] [stroke-dasharray:1_2] [stroke-dashoffset:1.05] opacity-0 [transition:stroke-dashoffset_160ms_cubic-bezier(0.23,1,0.32,1),opacity_0ms_linear_160ms] motion-reduce:[stroke-dashoffset:0] motion-reduce:[transition:opacity_200ms_ease] group-data-[status=failed]:[stroke-dashoffset:0] group-data-[status=failed]:opacity-100 group-data-[status=failed]:[transition:stroke-dashoffset_var(--prc-draw)_cubic-bezier(0.23,1,0.32,1)_var(--prc-check-delay),opacity_0ms_linear_var(--prc-check-delay)] motion-reduce:group-data-[status=failed]:[transition:opacity_200ms_ease] group-data-[status=cancelled]:[stroke-dashoffset:0] group-data-[status=cancelled]:opacity-100 group-data-[status=cancelled]:[transition:stroke-dashoffset_var(--prc-draw)_cubic-bezier(0.23,1,0.32,1)_var(--prc-check-delay),opacity_0ms_linear_var(--prc-check-delay)] motion-reduce:group-data-[status=cancelled]:[transition:opacity_200ms_ease]" d={CROSS} pathLength="1" />176      </svg>177      {hasLabel ? <span className="sr-only">{spoken}: </span> : null}178      {hasLabel ? (179        <span className="relative leading-[1.25] opacity-[0.65] [color:var(--prc-color)] [font-size:var(--prc-font)] [transition:opacity_200ms_ease] group-data-[status=running]:opacity-100 group-data-[status=done]:opacity-60 group-data-[status=failed]:opacity-100 group-data-[status=cancelled]:opacity-[0.55]">180          {label}181          <span className="pointer-events-none absolute inset-x-0 top-1/2 origin-left bg-current [transform:scaleX(0)] [translate:0_-50%] [height:max(1px,calc(var(--prc-font)/14))] [transition:transform_160ms_cubic-bezier(0.23,1,0.32,1)] group-data-[status=done]:group-data-[strike]:[transform:scaleX(1)] group-data-[status=done]:group-data-[strike]:[transition:transform_280ms_cubic-bezier(0.23,1,0.32,1)_var(--prc-strike-delay)] motion-reduce:[transform:scaleX(1)]! motion-reduce:opacity-0 motion-reduce:[transition:opacity_200ms_ease] motion-reduce:group-data-[status=done]:group-data-[strike]:opacity-100 motion-reduce:group-data-[status=done]:group-data-[strike]:[transition:opacity_200ms_ease]" aria-hidden="true" />182        </span>183      ) : null}184    </span>185  );186}187
188const tasks: { label: string; status: ProgressRingCheckStatus }[] = [189  { label: "Sync calendar events", status: "done" },190  { label: "Generate weekly report", status: "running" },191  { label: "Notify the team", status: "pending" },192];193
194const SPIN_MS = 1600;195
196const nextStatus: Record<Exclude<ProgressRingCheckStatus, "pending" | "running">, ProgressRingCheckStatus> = {197  done: "failed",198  failed: "cancelled",199  cancelled: "pending",200};201
202export function ProgressRingCheckList() {203  const [statuses, setStatuses] = useState(() => tasks.map((task) => task.status));204  const timers = useRef<number[]>([]);205
206  const update = (index: number, status: ProgressRingCheckStatus) =>207    setStatuses((current) => current.map((value, i) => (i === index ? status : value)));208
209  const finishLater = (index: number) => {210    timers.current.push(window.setTimeout(() => update(index, "done"), SPIN_MS));211  };212
213  useEffect(() => {214    const pending = timers.current;215    tasks.forEach((task, index) => {216      if (task.status !== "running") return;217      const finish = () => setStatuses((current) => current.map((value, i) => (i === index ? "done" : value)));218      pending.push(window.setTimeout(finish, SPIN_MS));219    });220    return () => pending.forEach((timer) => window.clearTimeout(timer));221  }, []);222
223  const advance = (index: number) => {224    const status = statuses[index];225    if (status === "pending") {226      update(index, "running");227      finishLater(index);228    } else if (status !== "running") {229      update(index, nextStatus[status]);230    }231  };232
233  return (234    <div className="flex flex-col gap-[2px]">235      {tasks.map((task, index) => (236        <button key={task.label} type="button" className="flex min-h-[44px] cursor-pointer appearance-none items-center rounded-[12px] border-0 bg-transparent px-[14px] text-left [font-family:inherit] text-[light-dark(#14181e,#f2f4f6)] [transition:background-color_.2s_ease] hover:bg-[light-dark(#f0f2f5,#1b1e23)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#f97316] motion-reduce:transition-none" onClick={() => advance(index)}>237          <ProgressRingCheck238            status={statuses[index]}239            label={task.label}240            size={22}241            fontSize={16}242          />243        </button>244      ))}245    </div>246  );247}