bouncing-dots

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