Three toothed gears mesh and turn in opposite directions, each at the right speed for its tooth count.
Rebuilding search index
1,284 of 3,906 documents
shard 02 / 06 · 41s
npx shadcn@latest add https://hyperblur.dev/r/loader-gears.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/loader-gears.tsx.
import { LoaderGears } from "@/components/hyperblur/loader-gears"
<LoaderGears size={64} label="Rebuilding index" />| Prop | Type | Default | Description |
|---|---|---|---|
| size | number | 56 | Height and width of the loader in pixels. |
| color | string | "#2f7bff" | Fill of the large gear and the lower gear. |
| accent | string | "#7fb3ff" | Fill of the upper small gear. |
| speed | number | 3 | Seconds for the large gear to complete one turn. The small gears turn faster. |
| label | string | Visible caption under the loader. Without it, Loading is announced to screen readers only. |