ASCII spinner setPro

Thirty text mode spinners for terminal and developer surfaces, in fixed width cells so nothing shifts.

Markdown

On this page

ProA build log in a terminal panel with one spinner per running step.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/ascii-spinner-set

Usage

tsx

import { AsciiSpinner } from "@/components/ui/chatcn/pro/ascii-spinner-set"

<AsciiSpinner kind="braille-snake" />

asciiSpinners exports every definition (frames, interval, family) and asciiSpinnerKinds the names in order, for pickers and for printing the same frames in a real terminal.

Examples

All thirty

ProEvery spinner with its kind name.

States

ProInline text, sizes, tones, speed, paused and the reduced motion frame.

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}

Kinds

Family	Kinds
Braille	`braille`, `braille-fill`, `braille-orbit`, `braille-bounce`, `braille-rise`, `braille-sand`, `braille-snake`, `braille-scan`
Blocks	`block-rise`, `block-grow`, `block-shade`, `block-bars`, `block-bounce`
Arcs	`arc`, `circle-quarters`, `circle-halves`, `square-corners`, `triangle`
Quadrants	`quadrant`, `quadrant-fill`, `quadrant-swap`
Dots	`ellipsis`, `dot-fill`, `dot-scan`
Lines	`line`, `pipe`, `arrow`
Bars	`bounce-bar`, `bounce-ball`, `shade-scan`

Props

Prop	Type	Notes
`kind`	`AsciiSpinnerKind`	Default `braille`
`speed`	`number`	Speed multiplier. Default 1
`paused`, `still`	`boolean`	Freeze, or show the reduced motion frame
`label`	`string`	Default "Loading"; `""` hides it

Keyboard

Not interactive.

Accessibility

role="img" with label as its name, so screen readers never read braille or box characters aloud.
Frames always run left to right, also inside right to left text.

Motion

Every character sits in a fixed 1ch cell, so frames never move the text around them, even when a glyph comes from a fallback font (Geist Mono has no braille or geometric shapes).
All spinners of one kind share a clock, so a column of them turns in step. Ticks pause while the tab is hidden.
Under reduced motion each spinner holds its most legible frame and breathes in opacity.