Animated Circular Progress Bar

1import { cn } from "@/lib/utils"
2 
3interface AnimatedCircularProgressBarProps {
4  max?: number
5  min?: number
6  value: number
7  gaugePrimaryColor: string
8  gaugeSecondaryColor: string
9  className?: string
10}
11 
12export function AnimatedCircularProgressBar({
13  max = 100,
14  min = 0,
15  value = 0,
16  gaugePrimaryColor,
17  gaugeSecondaryColor,
18  className,
19}: AnimatedCircularProgressBarProps) {
20  const circumference = 2 * Math.PI * 45
21  const percentPx = circumference / 100
22  const currentPercent = Math.round(((value - min) / (max - min)) * 100)
23 
24  return (
25    <div
26      className={cn("relative size-40 text-2xl font-semibold", className)}
27      style={
28        {
29          "--circle-size": "100px",
30          "--circumference": circumference,
31          "--percent-to-px": `${percentPx}px`,
32          "--gap-percent": "5",
33          "--offset-factor": "0",
34          "--transition-length": "1s",
35          "--transition-step": "200ms",
36          "--delay": "0s",
37          "--percent-to-deg": "3.6deg",
38          transform: "translateZ(0)",
39        } as React.CSSProperties
40      }
41    >
42      <svg
43        fill="none"
44        className="size-full"
45        strokeWidth="2"
46        viewBox="0 0 100 100"
47      >
48        {currentPercent <= 90 && currentPercent >= 0 && (
49          <circle
50            cx="50"
51            cy="50"
52            r="45"
53            strokeWidth="10"
54            strokeDashoffset="0"
55            strokeLinecap="round"
56            strokeLinejoin="round"
57            className="opacity-100"
58            style={
59              {
60                stroke: gaugeSecondaryColor,
61                "--stroke-percent": 90 - currentPercent,
62                "--offset-factor-secondary": "calc(1 - var(--offset-factor))",
63                strokeDasharray:
64                  "calc(var(--stroke-percent) * var(--percent-to-px)) var(--circumference)",
65                transform:
66                  "rotate(calc(1turn - 90deg - (var(--gap-percent) * var(--percent-to-deg) * var(--offset-factor-secondary)))) scaleY(-1)",
67                transition: "all var(--transition-length) ease var(--delay)",
68                transformOrigin:
69                  "calc(var(--circle-size) / 2) calc(var(--circle-size) / 2)",
70              } as React.CSSProperties
71            }
72          />
73        )}
74        <circle
75          cx="50"
76          cy="50"
77          r="45"
78          strokeWidth="10"
79          strokeDashoffset="0"
80          strokeLinecap="round"
81          strokeLinejoin="round"
82// … truncated