Back to Components
Loaders
Page Loader
Full-page loading overlay with spinner and optional message.
PropsUsage ExampleVariations
Loading your dashboard
Dependencies
- clsx
- tailwind-merge
Files
- components/ui/page-loader.tsx
Installation
Using shadcn CLI
npx shadcn add page-loader --url https://ui.hampton.ioManual installation
Copy the component file to your project and install dependencies:
npm install clsx tailwind-mergeRelated Loaders Components
Loading Dots
Bouncing dots loader with staggered animation for inline loading states.
Orbit Spinner
Circular orbiting dots that create a dynamic spinner.
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.