A beautiful animated loading spinner with wave effects, multiple patterns, colors, and highly customizable animations.
Command Palette
Search for a command to run...
Search for a command to run...
A beautiful animated loading spinner with wave effects, multiple patterns, colors, and highly customizable animations.
Elegant loading feedback. Shows activity during AI processing, data fetching, and async operations.
npx shadcn@latest add https://ui.heygaia.io/r/wave-spinner.jsonimport { WaveSpinner } from "@/components/ui/wave-spinner";
export default function Example() {
return <WaveSpinner />;
}Choose from 10 built-in color presets that match the design system.
Different grid layouts for varied visual effects.
Multiple delay patterns create different wave animations.
Customize the shape of individual dots.
Mix and match colors, patterns, and animations.
Real-world usage examples with buttons and loading states.
Please wait while we process your request...
| Prop | Type | Default | Description |
|---|---|---|---|
| color | ColorPreset | string | "primary" | Color preset name or any CSS color |
| pattern | GridPattern | "square3x3" | Grid layout pattern |
| animation | DelayPattern | "diagonalTL" | Animation delay pattern |
| duration | number | 0.7 | Animation duration in seconds |
| dotShape | "square" | "rounded" | "circle" | "square" | Shape of individual dots |
| size | "xs" | "sm" | "md" | "lg" | "xl" | "md" | Overall spinner size |
| className | string | - | Additional CSS classes |
| aria-label | string | "Loading" | Accessibility label |
The component exports several types and constants for external use:
import {
WaveSpinner,
COLOR_PRESETS,
DELAY_PATTERNS,
GRID_CONFIGS,
type WaveSpinnerProps,
type ColorPreset,
type DelayPattern,
type GridPattern,
} from "@/components/ui/wave-spinner";Available color preset names:
| Preset | Hex Value | Usage |
|---|---|---|
| primary | #00bbff | GAIA brand, primary actions |
| success | #22c55e | Success states |
| warning | #f59e0b | Warning states |
| danger | #ef4444 | Error/destructive states |
| muted | #71717a | Subtle loading indicators |
| purple | #a855f7 | Accent |
| cyan | #06b6d4 | Accent |
| rose | #f43f5e | Accent |
| indigo | #6366f1 | Accent |
| emerald | #10b981 | Accent |
Available grid pattern options:
| Pattern | Description |
|---|---|
| square3x3 | Standard 3×3 grid (9 dots) |
| square2x2 | Minimal 2×2 grid (4 dots) |
| square4x4 | Detailed 4×4 grid (16 dots) |
| line | Single row (3 dots) |
| diamond | Diamond arrangement (5 dots) |
| cross | Cross/plus arrangement (5 dots) |
| circle | Circular arrangement (8 dots) |
Animation delay patterns:
| Pattern | Description |
|---|---|
| diagonalTL | Wave from top-left corner |
| diagonalTR | Wave from top-right corner |
| diagonalBL | Wave from bottom-left corner |
| diagonalBR | Wave from bottom-right corner |
| ripple | Ripple from center outward |
| horizontal | Left-to-right wave |
| vertical | Top-to-bottom wave |
| random | Randomized appearance |
| spiral | Spiral from center |
The Wave Spinner includes built-in accessibility features:
role="status" to indicate loading statearia-label propprefers-reduced-motion media query<WaveSpinner aria-label="Loading user data..." />Pass any valid CSS color value:
// Hex color
<WaveSpinner color="#ff6b6b" />
// RGB
<WaveSpinner color="rgb(255, 107, 107)" />
// HSL
<WaveSpinner color="hsl(0, 100%, 71%)" />
// CSS variable
<WaveSpinner color="var(--my-brand-color)" />Common pattern for buttons with loading state:
import { WaveSpinner } from "@/components/ui/wave-spinner";
function SubmitButton({ isLoading, children }) {
return (
<button disabled={isLoading}>
{isLoading && (
<WaveSpinner
color="#ffffff"
size="xs"
pattern="line"
/>
)}
{isLoading ? "Loading..." : children}
</button>
);
}Adjust the animation duration for different contexts:
// Fast (urgent feedback)
<WaveSpinner duration={0.5} />
// Default
<WaveSpinner duration={0.7} />
// Slow (background processes)
<WaveSpinner duration={1.2} />