Three glowing dots travel around concentric rings at different radii and speeds, with a beating core in the middle.
Syncing workspace
Pulling 3 sources into Northwind
npx shadcn@latest add https://hyperblur.dev/r/loader-orbit.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/loader-orbit.tsx.
import { LoaderOrbit } from "@/components/hyperblur/loader-orbit"
<LoaderOrbit size={56} label="Syncing workspace" />| Prop | Type | Default | Description |
|---|---|---|---|
| size | number | 56 | Diameter of the whole loader in pixels. |
| color | string | "#2f7bff" | Color of the outer dot, the rings and the core. |
| accent | string | "#7fb3ff" | Color of the middle dot. |
| speed | number | 2.6 | Seconds for the outer dot to complete one lap. Inner dots are faster. |
| label | string | Visible caption under the loader. Without it, Loading is announced to screen readers only. |