Circular Progress

1'use client'
2 
3import * as React from 'react'
4 
5import { cn } from '@/lib/utils'
6 
7interface CircularProgressProps extends React.HTMLAttributes<HTMLDivElement> {
8  value: number
9  renderLabel?: (progress: number) => React.ReactNode
10  size?: number
11  strokeWidth?: number
12  circleStrokeWidth?: number
13  progressStrokeWidth?: number
14  shape?: 'square' | 'round'
15  progressClassName?: string
16  progressBgClassName?: string
17  labelClassName?: string
18  showLabel?: boolean
19  variant?: 'default' | 'animated'
20  gaugePrimaryColor?: string
21  gaugeSecondaryColor?: string
22  trackDashArray?: string | number
23}
24 
25const CircularProgress = ({
26  value,
27  renderLabel,
28  className,
29  progressClassName,
30  progressBgClassName,
31  labelClassName,
32  showLabel,
33  shape = 'round',
34  size = 100,
35  strokeWidth,
36  circleStrokeWidth = 10,
37  progressStrokeWidth = 10,
38  variant = 'default',
39  gaugePrimaryColor = 'currentColor',
40  gaugeSecondaryColor = 'currentColor',
41  trackDashArray,
42  ...props
43}: CircularProgressProps) => {
44  const effectiveCircleWidth = strokeWidth ?? circleStrokeWidth
45  const effectiveProgressWidth = strokeWidth ?? progressStrokeWidth
46  const maxStroke = Math.max(effectiveCircleWidth, effectiveProgressWidth)
47 
48  const radius = variant === 'animated' ? 45 : (size - maxStroke) / 2
49  const currentPercent = Math.min(Math.max(value, 0), 100)
50 
51  if (variant === 'animated') {
52    const gapPercent = 5
53    const dashFactor = (2 * Math.PI * 45) / 100
54    const circumference = 2 * Math.PI * 45
55 
56    const primaryDash = `${currentPercent * dashFactor} ${circumference}`
57    const primaryRotate = -90 + gapPercent * 0 * 3.6
58 
59    const secondaryDash = trackDashArray
60      ? trackDashArray
61      : `${Math.max(0, 90 - currentPercent) * dashFactor} ${circumference}`
62 
63    const secondaryRotate = 360 - 90 - gapPercent * 3.6
64 
65    return (
66      <div
67        className={cn('relative flex shrink-0 items-center justify-center', className)}
68        style={{ width: size, height: size }}
69        {...props}
70      >
71        <svg viewBox='0 0 100 100' className='size-full overflow-visible'>
72          {/* Dynamic Background Track */}
73          <circle
74            cx='50'
75            cy='50'
76            r={45}
77            fill='none'
78            stroke={gaugeSecondaryColor}
79            strokeWidth={effectiveCircleWidth}
80            strokeDasharray={secondaryDash}
81            strokeLinecap={trackDashArray ? 'butt' : shape}
82// … truncated