Back to Components
Loaders
Wave Loader
Animated bars that mimic a sound wave while loading.
PropsUsage ExampleVariations
Dependencies
- clsx
- tailwind-merge
- framer-motion
Files
- components/ui/wave-loader.tsx
Installation
Using shadcn CLI
npx shadcn add wave-loader --url https://ui.hampton.ioManual installation
Copy the component file to your project and install dependencies:
npm install clsx tailwind-merge framer-motionRelated Loaders Components
Loading Dots
Bouncing dots loader with staggered animation for inline loading states.
Orbit Spinner
Circular orbiting dots that create a dynamic spinner.
Page Loader
Full-page loading overlay with spinner and optional message.
Pulse Loader
Circular pulse loader with a soft expanding ring.
Skeleton Card
Card skeleton placeholder with shimmer animation and configurable rows.
Skeleton Shimmer
Skeleton block with a sweeping shimmer highlight.