Puntos rebotando

import { motion } from "framer-motion";

interface BouncingDotsProps {
  color?: string;
  size?: number;
  /** Duración de un rebote en segundos. */
  speed?: number;
}

export default function BouncingDots({
  color = "#0071e3",
  size = 14,
  speed = 0.9,
}: BouncingDotsProps) {
  return (
    <div role="status" aria-label="Cargando" className="flex items-center gap-2">
      {[0, 1, 2].map((i) => (
        <motion.div
          key={i}
          className="rounded-full"
          style={{ width: size, height: size, backgroundColor: color }}
          animate={{ y: [0, -size, 0] }}
          transition={{
            duration: speed,
            repeat: Infinity,
            delay: i * (speed / 6),
            ease: "easeInOut",
          }}
        />
      ))}
    </div>
  );
}