Loader
Communicate system state clearly with a range of loading patterns designed for AI interfaces. From subtle spinners to typing indicators.
Preview
LoadingLoadingLoadingLoadingLoadingLoadingLoading
import { Loader, type LoaderType } from "@/registry/loader";
const types = [
"default",
"typing",
"wave",
"grid",
"pulse",
"pulse-dot",
"typewriter",
] as const satisfies readonly LoaderType[];
export function LoaderDemo() {
return (
<div className="flex flex-wrap items-center justify-center gap-6">
{types.map((type) => (
<Loader key={type} type={type} />
))}
</div>
);
}
Installation
pnpm dlx @arrowui/cli@latest add loaderUsage
import { Loader } from "@/registry/loader";<Loader type="pulse-dot" speed="slow" size="small" />Examples
Types
Use the type prop to change the loader: default, typing, wave, grid, pulse, pulse-dot, or typewriter.
LoadingLoadingLoadingLoadingLoadingLoadingLoading
import { Loader, type LoaderType } from "@/registry/loader";
const types = [
"default",
"typing",
"wave",
"grid",
"pulse",
"pulse-dot",
"typewriter",
] as const satisfies readonly LoaderType[];
export function LoaderDemoType() {
return (
<div className="flex flex-wrap items-center justify-center gap-6">
{types.map((type) => (
<Loader key={type} type={type} />
))}
</div>
);
}
Size
Use the size prop to change the size of the loader.
LoadingLoadingLoading
import { Loader } from "@/registry/loader";
const sizes = ["small", "base", "large"] as const;
export function LoaderDemoSize() {
return (
<div className="flex flex-wrap items-center justify-center gap-6">
{sizes.map((size) => (
<Loader key={size} size={size} />
))}
</div>
);
}
Speed
Use the speed prop to change the speed of the loader.
LoadingLoadingLoading
import { Loader } from "@/registry/loader";
const speeds = ["slow", "base", "fast"] as const;
export function LoaderDemoSpeed() {
return (
<div className="flex flex-wrap items-center justify-center gap-6">
{speeds.map((speed) => (
<Loader key={speed} speed={speed} />
))}
</div>
);
}