Animated Circular Progress Bar

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