Progress Circle

1import { cn } from '@/lib/utils';
2import * as React from 'react';
3 
4/**
5 * Props for the ProgressCircle component.
6 *
7 * @interface ProgressCircleProps
8 * @extends {React.HTMLAttributes<HTMLDivElement>}
9 */
10export interface ProgressCircleProps
11  extends React.HTMLAttributes<HTMLDivElement> {
12  /**
13   * The progress value as a percentage (0-100).
14   */
15  progress: number;
16 
17  /**
18   * The diameter of the circle in pixels.
19   * @default 48
20   */
21  size?: number;
22 
23  /**
24   * The width of the progress stroke in pixels.
25   * @default 4
26   */
27  strokeWidth?: number;
28}
29 
30/**
31 * A circular progress indicator component that visualizes completion percentage.
32 *
33 * @component
34 * @example
35 * ```tsx
36 * <ProgressCircle progress={75} />
37 * <ProgressCircle progress={50} size={64} strokeWidth={6} />
38 * ```
39 */
40const ProgressCircle = React.forwardRef<HTMLDivElement, ProgressCircleProps>(
41  ({ progress, size = 48, strokeWidth = 4, className, ...props }, ref) => {
42    const radius = (size - strokeWidth) / 2;
43    const circumference = 2 * Math.PI * radius;
44    const offset = circumference - (progress / 100) * circumference;
45 
46    return (
47      <div
48        ref={ref}
49        className={cn(
50          'relative flex flex-col items-center justify-center text-white',
51          className,
52        )}
53        style={{
54          width: size,
55          height: size,
56        }}
57        {...props}
58      >
59        <svg
60          className="absolute" // Position SVG centered relative to the div
61          width={size}
62          height={size}
63          viewBox={`0 0 ${size} ${size}`}
64          style={{ transform: 'rotate(-90deg)' }} // Start from top
65        >
66          {/* Background track */}
67          <circle
68            cx={size / 2}
69            cy={size / 2}
70            r={radius}
71            strokeWidth={strokeWidth}
72            className="fill-none stroke-gray-500"
73          />
74          {/* Progress arc */}
75          <circle
76            cx={size / 2}
77            cy={size / 2}
78            r={radius}
79            strokeWidth={strokeWidth}
80            className="fill-none stroke-white"
81            strokeDasharray={circumference}
82            strokeDashoffset={offset}
83            style={{ transition: 'stroke-dashoffset 0.3s ease' }} // Smooth transition
84          />
85        </svg>
86        {/* Progress Percentage Text (centered visually) */}
87        <div className="z-10 text-xs font-medium">{Math.round(progress)}%</div>
88      </div>
89    );
90  },
91);
92ProgressCircle.displayName = 'ProgressCircle';
93// … truncated