Components

Spinner

The brand loader.

Loading, orbit style
orbit
Loading, pulse style
pulse
Loading, bars style
bars

Install

Copies the component source — plus its small internal deps — into your project. You own the code from the first minute.

terminal
npx lumora-ui@latest add spinner

Import

Using the workspace package instead? Deep imports keep cold starts lean; the barrel is fully tree-shakable either way.

app/page.tsx
import { Spinner } from "@lumora/ui/components/spinner";
// or from the barrel:
import { Spinner } from "@lumora/ui";

Props worth knowing

variant picks the loader: "orbit" (default) circles a comet arc around a quiet ring, "pulse" breathes a lumen dot, "bars" waves three bars. Sizes sm | md | lg. label (default "Loading") names it for screen readers via role="status"; under reduced motion every variant settles into a slow opacity pulse. Props extend the natural HTML element, so className, event handlers, and aria attributes pass straight through.