Circular Progress

1"use client";
2 
3import type React from "react";
4 
5import { cn } from "@/lib/utils";
6 
7const CIRCLE_CX = 50;
8const CIRCLE_CY = 50;
9const CIRCLE_R = 42;
10const CIRCUMFERENCE = 2 * Math.PI * CIRCLE_R;
11 
12/** Keyframes injected by component (no global CSS) - same pattern as Progress. */
13const CIRCULAR_PROGRESS_KEYFRAMES = `
14@keyframes circular-progress-rotate {
15  0% { transform: rotate(0deg); }
16  100% { transform: rotate(360deg); }
17}
18@keyframes circular-progress-spin {
19  0% { stroke-dasharray: 1, 400; stroke-dashoffset: 0; }
20  50% { stroke-dasharray: 400, 400; stroke-dashoffset: -100; }
21  100% { stroke-dasharray: 400, 400; stroke-dashoffset: -260; }
22}
23`;
24 
25const sizePresets: Record<string, string> = {
26  xs: "16px",
27  sm: "24px",
28  md: "48px",
29  lg: "64px",
30  xl: "96px",
31};
32 
33export interface CircularProgressProps
34  extends React.HTMLAttributes<HTMLDivElement> {
35  /** Progress value 0–100 (default variant only). */
36  value?: number;
37  min?: number;
38  max?: number;
39  /** When true, uses indeterminate variant (spinning). */
40  isIndeterminate?: boolean;
41  /** Rounded line cap on the progress arc. */
42  capIsRound?: boolean;
43  /** Overall size: preset (xs/sm/md/lg/xl) or CSS length (e.g. 48px). Default: 48px. */
44  size?: "xs" | "sm" | "md" | "lg" | "xl" | string | number;
45  /** Stroke width of track and indicator. Default: 10px. */
46  thickness?: string | number;
47  /** Variant: default (determinate) or indeterminate. */
48  variant?: "default" | "indeterminate";
49}
50 
51/** Default stroke colors: indicator = primary, track = gray-200. Override via className, e.g. [&_[data-slot=circular-progress-indicator]]:stroke-blue-500 */
52const DEFAULT_TRACK_CLASS = "stroke-gray-200";
53const DEFAULT_INDICATOR_CLASS = "stroke-primary";
54 
55function CircularProgress({
56  value = 0,
57  min = 0,
58  max = 100,
59  isIndeterminate,
60  capIsRound = false,
61  size = "48px",
62  thickness = "10px",
63  variant = "default",
64  className,
65  ...props
66}: CircularProgressProps) {
67  const indeterminate = isIndeterminate ?? variant === "indeterminate";
68  const sizeCss =
69    typeof size === "number"
70      ? `${size}px`
71      : (sizePresets[size as string] ?? size);
72  const thicknessCss =
73    typeof thickness === "number" ? `${thickness}px` : thickness;
74 
75  const percent = Math.min(
76    100,
77    Math.max(0, ((value - min) / (max - min)) * 100),
78  );
79  const strokeDashoffset = CIRCUMFERENCE * (1 - percent / 100);
80 
81  return (
82    <div
83      role="progressbar"
84      aria-valuemin={min}
85      aria-valuemax={max}
86// … truncated