Orbit Spinner
A free React loading spinner with counter-rotating arcs and a calm static fallback.
Customise
Code
<OrbitSpinner />Orbit Spinner is a free React loading spinner for Next.js and Tailwind that pairs two counter-rotating SVG arcs with a softly breathing centre dot. It provides a compact, accessible waiting state for cards, forms and page transitions without changing the surrounding layout after render.
The effect animates CSS transforms only, pauses when fully offscreen or when the browser tab is hidden, and becomes completely static when reduced motion is requested. One role status wrapper exposes the configurable loading label while the SVG remains decorative and hidden from assistive technology.
Install
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/loader-orbitUsage
import { OrbitSpinner } from "@/components/loader-orbit";
export function Example() {
return (
<OrbitSpinner
size={40}
label="Loading results"
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| size | number | 32 | Spinner diameter in pixels. Non-finite and non-positive values fall back to 32. |
| label | string | "Loading" | Visually hidden status text announced by assistive technology. |
| className | string | undefined | Additional classes merged onto the status wrapper. |
Customisation
Orbit Spinner exposes three Tier 3 CSS custom properties for its visual effect. Override the outer arc, inner arc and core colours on any ancestor while keeping the motion and accessible status unchanged.
.results-loader {
--loader-orbit-outer: var(--foreground);
--loader-orbit-inner: var(--ring);
--loader-orbit-core: var(--primary);
}Frequently asked questions
- Is Orbit Spinner free for commercial use?
- Yes. Orbit Spinner is MIT licensed, so you can use it in personal and commercial projects without attribution.
- Is this React loading spinner accessible and performant?
- Yes. It exposes one role status region with a configurable text label, hides its decorative SVG from assistive technology, and animates transforms only. The loops pause offscreen and in hidden tabs, then stop completely for reduced-motion users.
- How do I customise the spinner colours and size?
- Set the size prop to choose the diameter in pixels. Override --loader-orbit-outer, --loader-orbit-inner and --loader-orbit-core on an ancestor to map the three visual layers to your theme tokens.