Loading States & Skeletons

Beautiful loading states and skeleton components for enhanced user experience

Spinners

Default Spinner

Gradient Spinner

Dots Spinner

Interactive Demos

Button Loading

Loading Overlay

Page Loader

Inline Loaders

Loading your data...

Processing request...

Uploading files...

Skeleton Loaders

Basic Skeletons

Table Skeleton

Avatar Skeleton

Text Block Skeleton

Image Skeleton

Usage Examples

// Import components
import { Skeleton, SkeletonCard } from '@/app/components/ui/Skeleton';
import { Spinner, InlineLoader } from '@/app/components/ui/Spinner';

// Use in your components
{loading ? (
  <SkeletonCard />
) : (
  <YourContent />
)}

// Button with loading state
<button disabled={loading}>
  {loading ? <ButtonSpinner /> : 'Submit'}
</button>

// Inline loader
{isProcessing && <InlineLoader text="Processing..." />}