bobbing-dots

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