Loading Dots

import { LoadingDots } from "@/components/ui/loading-dots";

export default function Example() {
  return <LoadingDots />;
}

import { forwardRef } from "react";
import { cn } from "@/lib/utils";

const LoadingDots = forwardRef(({ className, size = "md", ...props }, ref) => {
  const s = { sm: "h-1.5 w-1.5", md: "h-2.5 w-2.5", lg: "h-3.5 w-3.5" };
  return (
    <div ref={ref} className={cn("inline-flex items-center gap-1", className)} role="status" {...props}>
      {[0, 1, 2].map((i) => (
        <div key={i} className={cn("rounded-full bg-primary", s[size])}
          style={{ animation: "pulse 1.4s ease-in-out infinite", animationDelay: `${i * 0.2}s` }}
        />
      ))}
      <span className="sr-only">Loading...</span>
    </div>
  );
});
LoadingDots.displayName = "LoadingDots";

export { LoadingDots };