dots

1import { cn } from "@/lib/utils";
2 
3function Dots({
4  className,
5  dots = 3,
6  ...props
7}: React.ComponentProps<"span"> & { dots?: number }) {
8  return (
9    <>
10      <style>{`
11        @keyframes loading-ui-dots-blink {
12          0%,
13          100% {
14            opacity: 0.2;
15          }
16 
17          20% {
18            opacity: 1;
19          }
20        }
21      `}</style>
22      <span
23        role="status"
24        className={cn(
25          "inline-flex items-center justify-center gap-[12%]",
26          className,
27        )}
28        {...props}
29      >
30        {Array.from({ length: dots }, (_, index) => (
31          <span
32            key={index}
33            data-slot="dot"
34            aria-hidden="true"
35            style={{
36              animation:
37                "loading-ui-dots-blink var(--duration, 1.4s) infinite both",
38              animationDelay: `calc(var(--delay, 0.2s) * ${index})`,
39            }}
40            className="aspect-square grow rounded-full bg-current"
41          />
42        ))}
43        <span className="sr-only">Loading</span>
44      </span>
45    </>
46  );
47}
48 
49export { Dots };