"use client";

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

interface PulseRingProps extends React.HTMLAttributes<HTMLDivElement> {
  size?: number;
  dotSize?: number;
  ringCount?: number;
  duration?: number;
}

function PulseRing({
  size = 24,
  dotSize = 8,
  ringCount = 2,
  duration = 2,
  className,
  ...props
}: PulseRingProps) {
  const rings = React.useMemo(
    () => Array.from({ length: ringCount }),
    [ringCount]
  );

  return (
    <div
      className={cn("relative inline-flex items-center justify-center", className)}
      style={{ width: size, height: size }}
      {...props}
    >
      {rings.map((_, index) => (
        <span
          key={index}
          className="absolute inline-flex h-full w-full rounded-full border border-primary/50 animate-ping"
          style={{
            animationDelay: `${(duration / ringCount) * index}s`,
            animationDuration: `${duration}s`,
          }}
        />
      ))}
      <span
        className="relative inline-flex rounded-full bg-primary"
        style={{ width: dotSize, height: dotSize }}
      />
    </div>
  );
}

export { PulseRing };
export type { PulseRingProps };
Pulse Ring

Dependencies

Files

Installation
