Select UI framework
Loading...
import * as Loader from "@/components/ui/loader"
export function LoaderDemo() {
return <Loader.Root />
}
Installation
pnpm dlx shadcn@latest add loader
Usage
import * as Loader from "@/components/ui/loader"<Loader.Root />Examples
Variants
Loading...
import * as Loader from "@/components/ui/loader"
export function LoaderVariants() {
return (
<div className="flex items-center gap-6">
<div className="flex flex-col items-center gap-2">
<Loader.Root />
<span className="text-muted-foreground text-xs">Ring (default)</span>
</div>
<div className="flex flex-col items-center gap-2">
<Loader.Root variant="spin" />
<span className="text-muted-foreground text-xs">Spin </span>
</div>
<div className="flex flex-col items-center gap-2">
<Loader.Root variant="dots" />
<span className="text-muted-foreground text-xs">Dots</span>
</div>
<div className="flex flex-col items-center gap-2">
<Loader.Root variant="bars" />
<span className="text-muted-foreground text-xs">Bars</span>
</div>
</div>
)
}
The loader supports four visual variants:
ring- Loader2Icon from Lucide with standard rotation (default)spin- LoaderIcon from Lucide with slower rotation (1.5s duration)dots- Three fading dotsbars- Three animated bars
Sizes
Loading...
import * as Loader from "@/components/ui/loader"
export function LoaderSizes() {
return (
<div className="flex items-center gap-6">
<div className="flex flex-col items-center gap-2">
<Loader.Root size="xs" />
<span className="text-muted-foreground text-xs">XS</span>
</div>
<div className="flex flex-col items-center gap-2">
<Loader.Root size="sm" />
<span className="text-muted-foreground text-xs">SM</span>
</div>
<div className="flex flex-col items-center gap-2">
<Loader.Root size="md" />
<span className="text-muted-foreground text-xs">MD</span>
</div>
<div className="flex flex-col items-center gap-2">
<Loader.Root size="lg" />
<span className="text-muted-foreground text-xs">LG</span>
</div>
</div>
)
}
Control the size with the size prop: xs, sm, md (default), lg.
Status Colors
Loading...
import * as Loader from "@/components/ui/loader"
export function LoaderStatus() {
return (
<div className="flex flex-wrap items-center gap-6">
<div className="flex flex-col items-center gap-2">
<Loader.Root status="primary" />
<span className="text-muted-foreground text-xs">Primary</span>
</div>
<div className="flex flex-col items-center gap-2">
<Loader.Root status="secondary" />
<span className="text-muted-foreground text-xs">Secondary</span>
</div>
<div className="flex flex-col items-center gap-2">
<Loader.Root status="success" />
<span className="text-muted-foreground text-xs">Success</span>
</div>
<div className="flex flex-col items-center gap-2">
<Loader.Root status="warning" />
<span className="text-muted-foreground text-xs">Warning</span>
</div>
<div className="flex flex-col items-center gap-2">
<Loader.Root status="danger" />
<span className="text-muted-foreground text-xs">Danger</span>
</div>
</div>
)
}
The loader supports status colors that match the badge component:
primary- Primary brand color (default)secondary- Muted/secondary colorsuccess- Success/positive statewarning- Warning/caution statedanger- Danger/error state
With Button
Loading...
import * as Button from "@/components/ui/button"
import * as Loader from "@/components/ui/loader"
export function LoaderWithButton() {
return (
<div className="flex flex-wrap items-center gap-4">
<Button.Root variant="secondary" appearance="bordered" disabled>
<Loader.Root size="sm" status="secondary" />
Loading
</Button.Root>
<Button.Root variant="secondary" appearance="muted" disabled>
<Loader.Root size="sm" status="secondary" />
Processing
</Button.Root>
</div>
)
}
Use the loader with buttons to indicate loading states.