pulsating-dots

1"use client";
2 
3import { motion } from "motion/react";
4import { cn } from "@/lib/utils";
5 
6function PulsatingDots({
7  className,
8  dots = 3,
9  duration = 1,
10  ...props
11}: React.ComponentProps<"span"> & { dots?: number; duration?: number }) {
12  const dotCount = Number.isFinite(dots) ? Math.max(1, Math.floor(dots)) : 3;
13 
14  return (
15    <span
16      role="status"
17      className={cn("inline-flex items-center justify-center", className)}
18      {...props}
19    >
20      <span aria-hidden="true" className="inline-flex w-full gap-[16%]">
21        {Array.from({ length: dotCount }, (_, index) => (
22          <motion.span
23            key={index}
24            className="inline-block aspect-square grow rounded-full bg-current"
25            animate={{
26              scale: [1, 1.5, 1],
27              opacity: [0.5, 1, 0.5],
28            }}
29            transition={{
30              duration,
31              ease: "easeInOut",
32              repeat: Infinity,
33              delay: index * 0.3,
34            }}
35          />
36        ))}
37      </span>
38      <span className="sr-only">Loading</span>
39    </span>
40  );
41}
42 
43export { PulsatingDots };