Browse components
Lattice Loader
A tiny isometric lattice of cubes or dots that pulses in a diagonal wave while the whole grid sways in 3D. Pure CSS.
Installation
npx shadcn@latest add @glint-ui/lattice-loaderFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/lattice-loader.json
Usage
import { LatticeLoader } from "@/components/ui/lattice-loader";
<LatticeLoader size={48} color="#a3e635" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| size | number | 72 | Overall size in px. |
| grid | number | 3 | Nodes per edge. |
| variant | "cubes" | "dots" | "cubes" | Node shape. |
| color | string | "#a3e635" | Node color. |
| duration | number | 1.4 | Seconds per pulse wave. |
| label | string | "Loading" | Screen-reader text. |
| className | string | — | Extra classes for the root element. |