import * as React from "react";

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

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

function LoadingDots({
  dotSize = 10,
  gap = 6,
  duration = 0.9,
  className,
  ...props
}: LoadingDotsProps) {
  return (
    <div
      className={cn("flex items-center text-primary", className)}
      style={{ gap }}
      {...props}
    >
      {[0, 1, 2].map((index) => (
        <span
          key={index}
          className="dot-bounce rounded-full bg-current"
          style={{
            width: dotSize,
            height: dotSize,
            animationDuration: `${duration}s`,
            animationDelay: `${(duration / 3) * index}s`,
          }}
        />
      ))}
      <style jsx>{`
        @keyframes dot-bounce {
          0%,
          100% {
            transform: translateY(0);
            opacity: 0.6;
          }
          50% {
            transform: translateY(-45%);
            opacity: 1;
          }
        }

        .dot-bounce {
          animation-name: dot-bounce;
          animation-timing-function: ease-in-out;
          animation-iteration-count: infinite;
        }
      `}</style>
    </div>
  );
}

export { LoadingDots };
Loading Dots

Dependencies

Files

Installation
