Wave Spinner

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

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

{/* Color presets */}
<WaveSpinner color="primary" />   {/* GAIA blue #00bbff */}
<WaveSpinner color="success" />   {/* Green */}
<WaveSpinner color="danger" />    {/* Red */}
<WaveSpinner color="warning" />   {/* Amber */}
<WaveSpinner color="purple" />    {/* Purple */}

{/* Custom colors */}
<WaveSpinner color="#ff6b6b" />   {/* Hex */}
<WaveSpinner color="rgb(255, 107, 107)" /> {/* RGB */}
<WaveSpinner color="hsl(0, 100%, 71%)" />  {/* HSL */}

<WaveSpinner size="xs" />  {/* 3px dots */}
<WaveSpinner size="sm" />  {/* 4px dots */}
<WaveSpinner size="md" />  {/* 6px dots - Default */}
<WaveSpinner size="lg" />  {/* 8px dots */}
<WaveSpinner size="xl" />  {/* 10px dots */}

<WaveSpinner pattern="square3x3" />  {/* 3x3 grid - Default */}
<WaveSpinner pattern="square2x2" />  {/* 2x2 grid */}
<WaveSpinner pattern="square4x4" />  {/* 4x4 grid */}
<WaveSpinner pattern="line" />      {/* Single row */}
<WaveSpinner pattern="diamond" />   {/* Diamond shape */}
<WaveSpinner pattern="cross" />     {/* Plus sign */}
<WaveSpinner pattern="circle" />    {/* Circular arrangement */}

<WaveSpinner animation="diagonalTL" />  {/* Top-left to bottom-right */}
<WaveSpinner animation="diagonalTR" />  {/* Top-right to bottom-left */}
<WaveSpinner animation="diagonalBL" />  {/* Bottom-left to top-right */}
<WaveSpinner animation="diagonalBR" />  {/* Bottom-right to top-left */}
<WaveSpinner animation="ripple" />      {/* From center outward */}
<WaveSpinner animation="horizontal" />  {/* Left to right waves */}
<WaveSpinner animation="vertical" />    {/* Top to bottom waves */}
<WaveSpinner animation="random" />      {/* Pseudo-random pattern */}
<WaveSpinner animation="spiral" />      {/* Spiral from center */}

<WaveSpinner dotShape="square" />   {/* Sharp corners - Default */}
<WaveSpinner dotShape="rounded" />  {/* Rounded corners */}
<WaveSpinner dotShape="circle" />   {/* Fully circular */}

<WaveSpinner duration={0.5} />  {/* Fast */}
<WaveSpinner duration={0.7} />  {/* Default */}
<WaveSpinner duration={1.2} />  {/* Slow */}

<button disabled className="flex items-center gap-2 px-4 py-2">
  <WaveSpinner size="sm" color="white" />
  <span>Loading...</span>
</button>

<div className="flex items-center justify-center min-h-screen">
  <div className="text-center">
    <WaveSpinner size="lg" />
    <p className="mt-4 text-muted-foreground">Loading your data...</p>
  </div>
</div>

<p className="flex items-center gap-2">
  Processing
  <WaveSpinner size="xs" pattern="line" />
</p>

<WaveSpinner
  color="#ff6b6b"
  size="lg"
  pattern="circle"
  animation="ripple"
  dotShape="circle"
  duration={1.0}
/>

@keyframes waveSpinnerPulse {
  0%, 100% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  [role="status"] div {
    animation-duration: 0s !important;
    opacity: 0.7 !important;
    transform: scale(1) !important;
  }
}