dots-ring

1import { cn } from "@/lib/utils";
2 
3type DotsRingProps = React.ComponentProps<"span"> & {
4  dots?: number;
5  dotScale?: number;
6  radiusScale?: number;
7};
8 
9function clamp(value: number, min: number, max: number) {
10  return Math.min(Math.max(value, min), max);
11}
12 
13function DotsRing({
14  className,
15  style,
16  dots = 8,
17  dotScale = 0.16,
18  radiusScale = 0.34,
19  ...props
20}: DotsRingProps) {
21  const dotCount = Math.max(4, Math.floor(dots));
22  const safeDotScale = clamp(dotScale, 0.2, 0.4);
23  const safeRadiusScale = clamp(radiusScale, 0, 0.5 - safeDotScale / 2);
24 
25  return (
26    <>
27      <style>{`
28        @keyframes loading-ui-dots-ring-pulse {
29          0%,
30          100% {
31            opacity: 0.25;
32            transform: scale(0.65);
33          }
34 
35          12.5% {
36            opacity: 1;
37            transform: scale(1);
38          }
39 
40          25% {
41            opacity: 0.75;
42            transform: scale(0.85);
43          }
44 
45          50% {
46            opacity: 0.35;
47            transform: scale(0.7);
48          }
49        }
50      `}</style>
51      <span
52        role="status"
53        className={cn(
54          "@container-[size] relative inline-flex aspect-square items-center justify-center",
55          className,
56        )}
57        style={style}
58        {...props}
59      >
60        <span aria-hidden="true" className="relative block size-full">
61          {Array.from({ length: dotCount }, (_, index) => {
62            const angle = (index / dotCount) * Math.PI * 2;
63            const x = `${(Math.sin(angle) * safeRadiusScale * 100).toFixed(2)}cqmin`;
64            const y = `${(-Math.cos(angle) * safeRadiusScale * 100).toFixed(2)}cqmin`;
65 
66            return (
67              <span
68                key={index}
69                className="absolute top-1/2 left-1/2"
70                style={{
71                  width: `calc(${safeDotScale} * 100cqmin)`,
72                  height: `calc(${safeDotScale} * 100cqmin)`,
73                  transform: `translate(-50%, -50%) translate(${x}, ${y})`,
74                }}
75              >
76                <span
77                  className="block size-full rounded-full bg-current"
78                  style={{
79                    animation:
80                      "loading-ui-dots-ring-pulse var(--duration, 1s) linear infinite",
81                    animationDelay: `calc(var(--duration, 1s) / ${dotCount} * ${index - dotCount})`,
82                  }}
83                />
84              </span>
85            );
86          })}
87        </span>
88// … truncated