Back to Components
Loaders
Loading Dots
Bouncing dots loader with staggered animation for inline loading states.
PropsUsage ExampleVariations
Dependencies
- clsx
- tailwind-merge
Files
- components/ui/loading-dots.tsx
Installation
Using shadcn CLI
npx shadcn add loading-dots --url https://ui.hampton.ioManual installation
Copy the component file to your project and install dependencies:
npm install clsx tailwind-mergeRelated Loaders Components
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.
Wave Loader
Animated bars that mimic a sound wave while loading.