Skip to content
Neon UI
Esc
↑↓navigate↵open⌘Jpreview
On this page

NeonLoader

Noise-resolve loading indicator animated from the official Neon mark.

NeonLoader turns the official Neon mark into a compact status indicator. Grain resolves into the crisp mark, holds, and dissolves back into grain on a steady loop.

Loading

Install

npx shadcn@latest add https://ui.neon.com/r/neon-loader.json

Usage

import { NeonLoader } from "@/components/neon-ui/neon-loader";

<NeonLoader label="Provisioning database" size="md" />;

Props

PropType
label?string

Accessible status text and visible label.

Typestring
Default"Loading"
size?"sm" | "md" | "lg" | number

Preset or exact pixel size of the Neon mark.

Type"sm" | "md" | "lg" | number
Default"md"
showLabel?boolean

Show the visible label beside the mark.

Typeboolean
Defaultfalse
decorative?boolean

Remove status semantics when the loader is decorative.

Typeboolean
Defaultfalse
mark?LoaderMark

Swap the Neon mark for your own logo: { path, width, height } in SVG viewBox units.

TypeLoaderMark
duration?number

Duration of one noise-resolve loop in milliseconds.

Typenumber
Default4000

Accessibility

The loader uses role="status" and an accessible label by default. Set decorative only when another element already communicates loading. Reduced-motion users see the completed Neon mark without animation.