Preview

Spinner Loaders

Small
Medium
Large

Dots Loaders

Small
Medium
Large

Pulse Loaders

Small
Medium
Large

Bars Loaders

Small
Medium
Large

Color Variants

Primary
Secondary

Preset Examples

Small Spinner
Medium Dots
Large Pulse

Installation

<> import.ts
import { Loader } from "@/components/ui/loader"

Code

<> component.tsx
import { Loader } from "@/components/ui/loader"

<Loader />

API Reference

Loader

A loading component with various animation styles.

<> import.ts
import { Loader, LoaderPresets } from "@/components/ui/loader"

Props

PropTypeDefaultDescription
size
"sm" | "md" | "lg""md"Size of the loader
variant
"spinner" | "dots" | "pulse" | "bars" | "outline""spinner"Animation variant of the loader
color
"primary" | "secondary" | "accent""primary"Color theme of the loader
className
string""Additional CSS classes

Examples

Example 1
<> example.tsx
// Basic loader
<Loader />
Example 2
<> example.tsx
// Different variants
<Loader variant="spinner" />
<Loader variant="dots" />
<Loader variant="pulse" />
<Loader variant="bars" />
<Loader variant="outline" />
Example 3
<> example.tsx
// Different sizes
<Loader size="sm" />
<Loader size="md" />
<Loader size="lg" />
Example 4
<> example.tsx
// Different colors
<Loader color="primary" />
<Loader color="secondary" />
<Loader color="accent" />
Example 5
<> example.tsx
// Custom loader
<Loader 
  variant="outline"
  size="lg"
  color="accent"
/>

Presets

smallSpinner

Small spinner loader with primary color

mediumDots

Medium dots loader with primary color

largePulse

Large pulse loader with primary color

accentBars

Medium bars loader with accent color

outlineLoader

Medium outline loader with primary color