A compact loading indicator of dots or bars pulsing in a diagonal wave.
npx shadcn@latest add https://hyperblur.dev/r/lattice-loader.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/lattice-loader.tsx.
import { LatticeLoader } from "@/components/hyperblur/lattice-loader"
<LatticeLoader size={32} shape="grid" />| Prop | Type | Default | Description |
|---|---|---|---|
| size | number | 32 | Width and height of the whole loader in pixels. |
| color | string | "#2f7bff" | Dot and bar color. |
| speed | number | 1 | Animation speed multiplier. |
| shape | "grid" | "ring" | "bars" | "grid" | Layout of the loader. |
| columns | number | 3 | Dots per side for the grid shape (2 to 6). |
| label | string | "Loading" | Visually hidden text announced to screen readers. |