Loader
Three loading indicator variants - spinner, dots, skeleton. Accessible role=status. FullPageLoader for full-viewport loading states.
Variants
- spinner - SVG circle with stroke-dasharray animation. Uses --color-primary stroke. Not border-based - renders crisply at all sizes.
- dots - Three circles with staggered bounce animation (animation-delay: 0ms, 150ms, 300ms).
- skeleton - A div with animate-pulse shimmer. Use for content placeholders while data loads.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | LoaderVariant | 'spinner' | spinner, dots, or skeleton |
| size | 'sm' | 'md' | 'lg' | 'md' | Scales the indicator |
| text | string | 'Loading' | aria-label for screen readers |
| className | string | undefined | Additional classes |
FullPageLoader
A named export from the same file. Renders a Loader centered inside a full-viewport div with bg-[var(--color-background)]:
import { FullPageLoader } from '@/components/ui/Loader'
// In a loading.tsx file:
export default function Loading() {
return <FullPageLoader text="Loading dashboard..." />
}Usage
import Loader from '@/components/ui/Loader'
// Inline spinner during data fetch:
{isLoading && <Loader variant="spinner" size="sm" />}
// Skeleton placeholder:
{!data && <Loader variant="skeleton" className="h-32 w-full rounded-xl" />}
// Dots for background operations:
<Loader variant="dots" text="Processing payment..." />