Components
An animated loading spinner made of pulsing dots with configurable wave patterns, grid layouts, colors, sizes, and dot shapes.
Loading preview...
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>
);
}