Wave Spinner

Component 21

About

An animated loading spinner made of pulsing dots with configurable wave patterns, grid layouts, colors, sizes, and dot shapes.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Wave Spinner to your project and fits it to your theme.

Code

How Wave Spinner is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { WaveSpinner } from "@/components/ui/wave-spinner";

export default function WaveSpinnerDemo() {
  return (
    <div className="inline-flex flex-col items-center justify-center gap-8 p-10">
      <WaveSpinner size="xl" pattern="square4x4" />
      <div className="flex items-center gap-10">
        <WaveSpinner size="xl" color="purple" pattern="diamond" />
        <WaveSpinner size="xl" color="success" animation="ripple" />
        <WaveSpinner
          size="xl"
          color="cyan"
          dotShape="circle"
          pattern="square3x3"
        />
        <WaveSpinner
          size="xl"
          color="rose"
          dotShape="rounded"
          pattern="cross"
        />
      </div>
    </div>
  );
}