Dot matrix loaderPro

A pending state drawn as an LED sign: a short label scrolling through a dot window, an animated dot glyph, or both.

Markdown

On this page

ProA research agent's stages on an LED sign, each with its own glyph.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/dot-matrix-loader

Usage

tsx

import { DotMatrixLoader } from "@/components/ui/chatcn/pro/dot-matrix-loader"

<DotMatrixLoader variant="both" glyph="orbit" label="Rendering" />

Labels that fit the window hold still; longer ones march through it one dot column at a time. Change label per step and pass it as the key so each step starts from its first letter.

Examples

Variants

ProGlyphs, scrolling and short labels, square dots, tones, paused, still and badge size.

Pending timing

Used as a pending state, a loader never shows in the first 300 ms: the user's own action is the feedback, and most waits end before that. Once shown, it stays at least 400 ms so it never flashes. useDelayedPresence from the free thinking-indicator does both.

tsx

import { useDelayedPresence } from "@/components/ui/chatcn/thinking-indicator"

const shown = useDelayedPresence(isPending)

{shown ? <PixelGridLoader /> : null}

Props

Prop	Type	Notes
`label`	`string`	The status in words and the accessible name. Default "Thinking"
`variant`	`"label" \| "glyph" \| "both"`	Default `label`
`glyph`	`LoaderPattern`	The 7 x 7 glyph's pattern. Default `orbit`
`length`	`number`	Window width in characters. Defaults to the label, up to 10
`size`	`"badge" \| "sm" \| "md" \| "lg" \| "hero" \| number`	Dot pitch. Default `sm`
`shape`	`"round" \| "square"`	LEDs or pixels
`speed`	`number`	Scroll and glyph speed multiplier
`paused`, `still`	`boolean`	Freeze, or draw the reduced motion frame

Keyboard

Not interactive.

Accessibility

role="img" with the full label as its name, so a screen reader hears "Reading 12 sources" once, never a scrolling fragment.
The dot font covers Latin letters, digits and common punctuation. The sign always draws left to right, also in right to left pages; for other scripts, show the label as text next to a glyph.
Unlit dots darken under prefers-contrast: more and turn GrayText under forced-colors.

Motion

The label moves with steps(), so it lands on whole dot columns like a real sign, at 14 columns a second. Under reduced motion the whole label shows at rest.
Under reduced motion the loop stops on one deterministic still frame and the whole loader breathes in opacity, 1 to 0.55 over 1.4 s, so it still reads as working without any movement. still draws that frame on demand.
paused freezes the loop where it is. Loaders are status, not decoration, so they need no pause button, but you can wire one to paused.
Animates only opacity and transform. No JavaScript runs per frame.