Pulse Loader

"use client";
import * as React from "react";
import { motion, HTMLMotionProps } from "motion/react";
import { cn } from "@/lib/utils";
export interface LoaderPulseProps extends HTMLMotionProps<"div"> {
  size?: number;
  color?: string;
  duration?: number;
}
export function LoaderPulse({
  className,
  size = 60,
  color = "currentColor",
  duration = 1.5,
  ...props
}: LoaderPulseProps) {
  return (
    <motion.div
      className={cn("rounded-full", className)}
      style={{
        width: size,
        height: size,
        backgroundColor: color,
      }}
      animate={{
        scale: [1, 1.2, 1],
        opacity: [0.5, 1, 0.5],
      }}
      transition={{
        duration,
        ease: "easeInOut",
        repeat: Infinity,
      }}
      {...props}
    />
  );
}