Dots Loader

"use client";
import * as React from "react";
import { motion, HTMLMotionProps } from "motion/react";
import { cn } from "@/lib/utils";
export interface LoaderDotsProps
  extends Omit<HTMLMotionProps<"div">, "children"> {
  size?: number;
  color?: string;
  count?: number;
  gap?: number;
  duration?: number;
}
export function LoaderDots({
  className,
  size = 10,
  color = "currentColor",
  count = 3,
  gap = 8,
  duration = 1.2,
  ...props
}: LoaderDotsProps) {
  return (
    <div className={cn("flex items-center", className)} style={{ gap: gap }}>
      {Array.from({ length: count }).map((_, index) => (
        <motion.div
          key={index}
          className="rounded-full"
          style={{
            width: size,
            height: size,
            backgroundColor: color,
          }}
          animate={{
            y: [0, -size * 1.5, 0],
          }}
          transition={{
            duration,
            ease: "easeInOut",
            repeat: Infinity,
            delay: index * (duration / count),
          }}
        />
      ))}
    </div>
  );
}