Pixel loaders
Six pixel loading indicators (orbit, snake, helix, scan, rain, pulse); clicking one finishes it with a check before it restarts.
Installation
pnpm dlx shadcn@latest add @lumesec/px-spinnersFirst timeRegister the @lumesec registry once, or install by URL+
Adds @lumesec to your components.json:
pnpm dlx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.jsonOr skip the setup and install by URL:
npx shadcn@latest add https://elements.lumesec.ai/r/px-spinners.jsonUsage
import { PxSpinners } from "@/components/lumesec/px-spinners";
export function Example() {
return (
<PxSpinners />
);
}Behaviour
Six loading indicators made of pixels: orbit, snake, helix, scan, rain and pulse. Clicking one finishes it with a check before it starts again.
API reference
Events
Events bubble and cross the shadow boundary unless the description says otherwise.
finishReact proponFinishDetail{ loader: string }Fires when a loader is finished, by click, Finish all or finish(). loader is Orbit, Snake, Helix, Scan, Rain or Pulse.
Methods
Call them on the element, for example through a React ref.
finish(index: number)Shows the check on loader 0 to 5 for 1.6 seconds, then restarts it, and fires finish.
Accessibility
- The canvas has
role="img"with anaria-labelnaming all six loaders. It is not focusable and exposes no busy or progress state. - Finishing a single loader requires a pointer; "Finish all" is a native button.
- Reduced motion: each loader shows a still frame; the finish check still appears.
Theming
The element reads your shadcn theme tokens through its shadow root, so light and dark follow your theme. The accent comes from --lumesec. See Theming.
This component reads --foreground, --lumesec and --muted-foreground.
To restyle only LumeSec elements, set the matching --ui-* overrides: --ui-accent, --ui-fg and --ui-muted.
Notes
- The loaders are a 3 by 2 gallery on a 216px tall canvas and animate continuously while on screen. They are visual only and carry no progress value.
Related
Was this page helpful?