Six small indicators for an AI reply that is on its way, from a pixel trail to a hopping graph, each with an optional shimmering status label.
Pixel trail
pixel-trail.tsxA lit pixel circles a 3×3 grid and leaves a fading trail while the centre breathes.
| Prop | Type | Default | Description |
|---|---|---|---|
size | number | 28 | Width and height of the graphic in px. |
label | string | null | "Thinking…" | Shimmering text beside the loader. Pass null for the graphic alone (a hidden “Loading” label is kept). |
speed | number | 1 | Speed multiplier; 2 runs twice as fast. |
className | string | — | Extra classes on the status wrapper. |
Scanline
scanline.tsxA glowing scan line sweeps a dot matrix and each row lights as it passes.
| Prop | Type | Default | Description |
|---|---|---|---|
size | number | 28 | Width and height of the graphic in px. |
label | string | null | "Reading files…" | Shimmering text beside the loader. Pass null for the graphic alone (a hidden “Loading” label is kept). |
speed | number | 1 | Speed multiplier; 2 runs twice as fast. |
density | 3 | 4 | 5 | 4 | Cells per side of the grid. |
className | string | — | Extra classes on the status wrapper. |
Tile ripple
tile-ripple.tsxSquares swell and turn in a wave that rolls from one corner to the other.
| Prop | Type | Default | Description |
|---|---|---|---|
size | number | 28 | Width and height of the graphic in px. |
label | string | null | "Drafting a plan…" | Shimmering text beside the loader. Pass null for the graphic alone (a hidden “Loading” label is kept). |
speed | number | 1 | Speed multiplier; 2 runs twice as fast. |
density | 3 | 4 | 5 | 4 | Cells per side of the grid. |
className | string | — | Extra classes on the status wrapper. |
Quad lock
quad-lock.tsxFour tiles spin in from the corners, lock into a square with a pulse, then scatter.
| Prop | Type | Default | Description |
|---|---|---|---|
size | number | 28 | Width and height of the graphic in px. |
label | string | null | "Assembling layout…" | Shimmering text beside the loader. Pass null for the graphic alone (a hidden “Loading” label is kept). |
speed | number | 1 | Speed multiplier; 2 runs twice as fast. |
className | string | — | Extra classes on the status wrapper. |
Comet rhombus
comet-rhombus.tsxA comet circles a rhombus outline while the inner rhombus turns the other way.
| Prop | Type | Default | Description |
|---|---|---|---|
size | number | 28 | Width and height of the graphic in px. |
label | string | null | "Reasoning…" | Shimmering text beside the loader. Pass null for the graphic alone (a hidden “Loading” label is kept). |
speed | number | 1 | Speed multiplier; 2 runs twice as fast. |
className | string | — | Extra classes on the status wrapper. |
Graph hop
graph-hop.tsxA pulse hops along the edges of a small graph and each node flashes as it lands.
| Prop | Type | Default | Description |
|---|---|---|---|
size | number | 28 | Width and height of the graphic in px. |
label | string | null | "Connecting sources…" | Shimmering text beside the loader. Pass null for the graphic alone (a hidden “Loading” label is kept). |
speed | number | 1 | Speed multiplier; 2 runs twice as fast. |
className | string | — | Extra classes on the status wrapper. |
Install the whole set
Installs every thinking indicators variant at once. Each section above has its own command for a single variant.
Pro installs use your private registry token. Add the @geturui-pro registry once — setup guide. The command works after you get Pro.
Accessibility
- Each loader is a role="status" live region; the visible label (or a hidden “Loading”) is what gets announced.
- The graphics are aria-hidden so screen readers never read individual dots or paths.
- With reduced motion every loader renders a still frame and the label stops shimmering.