"use client";

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

interface WaveLoaderProps extends React.HTMLAttributes<HTMLDivElement> {
  barCount?: number;
  barWidth?: number;
  height?: number;
  gap?: number;
  duration?: number;
}

function WaveLoader({
  barCount = 5,
  barWidth = 6,
  height = 32,
  gap = 6,
  duration = 1.2,
  className,
  ...props
}: WaveLoaderProps) {
  const bars = Array.from({ length: barCount }, (_, index) => index);

  return (
    <div
      className={cn("flex items-end text-primary", className)}
      style={{ height, gap }}
      {...props}
    >
      {bars.map((index) => (
        <motion.span
          key={index}
          className="rounded-sm bg-current"
          style={{ width: barWidth, height: "100%", transformOrigin: "center bottom" }}
          animate={{ scaleY: [0.3, 1, 0.3] }}
          transition={{
            duration,
            repeat: Infinity,
            ease: "easeInOut",
            delay: (duration / barCount) * index,
          }}
        />
      ))}
    </div>
  );
}

export { WaveLoader };
export type { WaveLoaderProps };
Wave Loader

Dependencies

Files

Installation
