spiral

1"use client";
2 
3import { motion } from "motion/react";
4import { cn } from "@/lib/utils";
5 
6function Spiral({
7  dots = 8,
8  radius = 31.25,
9  className,
10  ...props
11}: React.ComponentProps<"span"> & { dots?: number; radius?: number }) {
12  return (
13    <span
14      role="status"
15      className={cn("relative inline-block", className)}
16      {...props}
17    >
18      {Array.from({ length: dots }, (_, index) => {
19        const angle = (index / dots) * (2 * Math.PI);
20        const x = `${50 + radius * Math.cos(angle)}%`;
21        const y = `${50 + radius * Math.sin(angle)}%`;
22 
23        return (
24          <motion.span
25            key={index}
26            aria-hidden="true"
27            className="absolute inline-block rounded-full bg-current"
28            style={{
29              left: x,
30              top: y,
31              translate: "-50% -50%",
32              width: `${150 / dots}%`,
33              height: `${150 / dots}%`,
34            }}
35            animate={{
36              scale: [0, 1, 0],
37              opacity: [0, 1, 0],
38            }}
39            transition={{
40              duration: 1.5,
41              repeat: Infinity,
42              delay: (index / dots) * 1.5,
43              ease: "easeInOut",
44            }}
45          />
46        );
47      })}
48      <span className="sr-only">Loading</span>
49    </span>
50  );
51}
52 
53export { Spiral };