"use client";

import * as React from "react";
import { motion } from "framer-motion";
import { cn } from "@/lib/utils";

interface PulseLoaderProps extends React.HTMLAttributes<HTMLDivElement> {
  dotSize?: number;
  gap?: number;
  duration?: number;
}

function PulseLoader({
  dotSize = 10,
  gap = 6,
  duration = 1.2,
  className,
  ...props
}: PulseLoaderProps) {
  return (
    <div
      className={cn("flex items-center text-primary", className)}
      style={{ gap }}
      {...props}
    >
      {[0, 1, 2].map((index) => (
        <motion.span
          key={index}
          className="rounded-full bg-current"
          style={{ width: dotSize, height: dotSize }}
          animate={{ opacity: [0.3, 1, 0.3], scale: [0.8, 1, 0.8] }}
          transition={{
            duration,
            repeat: Infinity,
            ease: "easeInOut",
            delay: (duration / 3) * index,
          }}
        />
      ))}
    </div>
  );
}

export { PulseLoader };
export type { PulseLoaderProps };
Pulse Loader

Dependencies

Files

Installation
