Progress Circle

1import type { Component, ComponentProps } from "solid-js"
2import { mergeProps, splitProps } from "solid-js"
3 
4import { cn } from "~/lib/utils"
5 
6type Size = "xs" | "sm" | "md" | "lg" | "xl"
7 
8const sizes: Record<Size, { radius: number; strokeWidth: number }> = {
9  xs: { radius: 15, strokeWidth: 3 },
10  sm: { radius: 19, strokeWidth: 4 },
11  md: { radius: 32, strokeWidth: 6 },
12  lg: { radius: 52, strokeWidth: 8 },
13  xl: { radius: 80, strokeWidth: 10 }
14}
15 
16type ProgressCircleProps = ComponentProps<"div"> & {
17  value?: number
18  size?: Size
19  radius?: number
20  strokeWidth?: number
21  showAnimation?: boolean
22}
23 
24const ProgressCircle: Component<ProgressCircleProps> = (rawProps) => {
25  const props = mergeProps({ size: "md" as Size, showAnimation: true }, rawProps)
26  const [local, others] = splitProps(props, [
27    "class",
28    "children",
29    "value",
30    "size",
31    "radius",
32    "strokeWidth",
33    "showAnimation"
34  ])
35 
36  const value = () => getLimitedValue(local.value)
37  const radius = () => local.radius ?? sizes[local.size].radius
38  const strokeWidth = () => local.strokeWidth ?? sizes[local.size].strokeWidth
39  const normalizedRadius = () => radius() - strokeWidth() / 2
40  const circumference = () => normalizedRadius() * 2 * Math.PI
41  const strokeDashoffset = () => (value() / 100) * circumference()
42  const offset = () => circumference() - strokeDashoffset()
43 
44  return (
45    <div class={cn("flex flex-col items-center justify-center", local.class)} {...others}>
46      <svg
47        width={radius() * 2}
48        height={radius() * 2}
49        viewBox={`0 0 ${radius() * 2} ${radius() * 2}`}
50        class="-rotate-90"
51      >
52        <circle
53          r={normalizedRadius()}
54          cx={radius()}
55          cy={radius()}
56          stroke-width={strokeWidth()}
57          fill="transparent"
58          stroke=""
59          stroke-linecap="round"
60          class={cn("stroke-secondary transition-colors ease-linear")}
61        />
62        {value() >= 0 ? (
63          <circle
64            r={normalizedRadius()}
65            cx={radius()}
66            cy={radius()}
67            stroke-width={strokeWidth()}
68            stroke-dasharray={circumference() + " " + circumference()}
69            stroke-dashoffset={offset()}
70            fill="transparent"
71            stroke=""
72            stroke-linecap="round"
73            class={cn(
74              "stroke-primary transition-colors ease-linear",
75              local.showAnimation ? "transition-all duration-300 ease-in-out" : ""
76            )}
77          />
78// … truncated