Busy Glyph

Install

Or by hand, in a Next.js project with shadcn set up. It writes components/pastetaste/busy-glyph.tsx.

Install the pastetaste component "Busy Glyph" (busy-glyph) into this Next.js project and use it.

What it is: 32 small loaders that say what the wait is for: rings, dots, a bouncing ball, clock, hourglass, signal and task glyphs (upload, send, coin, truck, page). Off, each finishes its beat and rests.

Before you place it, ask me (one short message, in my language; "skip" = sensible default): which page and section it goes in, my brand colour (hex), the text, labels or images it should show, and whether I want my logo or my own copy in the demo content. Then:

Steps:
1. If the project has no components.json, run: npx shadcn@latest init -y -d. Then run: npx shadcn@latest add https://pastetaste.com/r/busy-glyph.json
   (it writes components/pastetaste/busy-glyph.tsx; install any npm packages it reports).
2. Import it: import { BusyGlyph } from "@/components/pastetaste/busy-glyph" (check the file for the exact named export).
3. Put it where it fits on the page I name, keep the rest of the page untouched, and pass props for my colours instead of editing the installed file.
4. It does not depend on Tailwind; colours come from CSS variables (--pt-*) or props.
5. It supports prefers-reduced-motion with a still state; do not remove it.

Props (all optional unless the type has no default):
- variant: BusyGlyphVariant = 'spinner' — Rings: spinner, chase, draw, orbit, halo, pulse, ripple, iris. Dots & balls: wave, typing, swell, leapfrog, triad, twin, bounce, tumble. Time & signal: clock, pendulum, timer, hourglass, wifi, radar, antenna, bars. Tasks: search, send, upload, download, sync, coin, ship, read.
- size: number | string = 24 — Width and height in px, or any CSS length ('1em' sits on the text line).
- color: string = currentColor — Glyph colour; dim parts use the same colour at --pt-busy-dim opacity.
- speed: number = 1 — Playback rate; 2 is twice as fast. Changing it restarts the loop from its rest pose.
- active: boolean = true — While true the glyph loops. Set false and it finishes its current beat (at most about a second) and rests on its designed pose.
- label: string = per variant ('Loading', 'Uploading', 'Processing payment'…) — Visually hidden status text in a role="status" region. Pass "" when the glyph is decorative.
- stroke: number = 2 — Line width in grid units (the glyph is drawn on a 24 grid).
- onSettle: () => void — Called once the glyph has come to rest after active turned false: the moment to show a check or the result.
- className / style: string / CSSProperties — Passed to the wrapper span.
- BUSY_GLYPHS: { variant; family; label }[] — Named export listing every variant with its family and default label, for pickers and galleries.

Live preview: https://pastetaste.com/c/busy-glyph
Then run the dev server, check it in the browser at desktop and mobile width, and tell me the page URL.

Props 10