About
A multi-variant animated loading indicator (spinner, dots, bars, dither, ASCII spinners, morph, comet, scramble, metaballs, newton, helix, percent) that scales from one size prop and falls back to a calm opacity pulse under reduced motion.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Loader to your project and fits it to your theme.
Code
How Loader is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
"use client";
import { Loader, type LoaderVariant } from "@/components/ui/loader";
const VARIANTS: { variant: LoaderVariant; label: string }[] = [
{ variant: "spinner", label: "Spinner" },
{ variant: "dots", label: "Dots" },
{ variant: "bars", label: "Bars" },
{ variant: "dot-matrix", label: "Dot Matrix" },
{ variant: "dither", label: "Dither" },
{ variant: "morph", label: "Morph" },
{ variant: "comet", label: "Comet" },
{ variant: "metaballs", label: "Metaballs" },
{ variant: "newton", label: "Newton" },
{ variant: "helix", label: "Helix" },
{ variant: "scramble", label: "Scramble" },
{ variant: "percent", label: "Percent" },
{ variant: "ascii", label: "ASCII" },
{ variant: "ascii-line", label: "ASCII Line" },
{ variant: "ascii-braille", label: "ASCII Braille" },
{ variant: "ascii-blocks", label: "ASCII Blocks" },
{ variant: "ascii-bounce", label: "ASCII Bounce" },
];
export default function LoaderPreview() {
return (
<div className="flex flex-wrap items-center justify-center gap-8 p-8">
{VARIANTS.map(({ variant, label }) => (
<div key={variant} className="flex flex-col items-center gap-4">
<Loader variant={variant} size={36} />
<span className="text-xs text-muted-foreground">{label}</span>
</div>
))}
</div>
);
}
Dependencies
More by Mark Yo
View all
Pricing Table
1
Message