Spinner
Round two-arc indicator for an in-flight AJAX or button loading state.
Size
On a brand band
In a button
Thinking
<koala-thinking> is the spinner plus a word from ThinkingWords
This is the indicator for anywhere Joey is working. A bare spinner says only that something is
happening, and next to a control the reader has just pressed the likeliest reading is the
wrong one: their click being processed, rather than the assistant thinking. The word says who
is busy. They live in the design system, not the call site, because they are product copy in
Joey's voice that appears on half a dozen surfaces.
One word by default, held until the work finishes. It rotated everywhere once and the interval was tuned four times without landing: most of these waits are two to four seconds, so any pace slow enough not to feel hurried never fired anyway, and a label that changes while nothing has changed is decoration pretending to be information. Variety comes from the word being drawn afresh each time the indicator appears.
roomy draws on the longer, more characterful words as well, for somewhere with
a full line to spend. Leave it off inside a button, where a long word makes the thing it
sits in change width while the reader watches it.
cycle-seconds is the exception, and it is for a wait measured in MINUTES —
reading thirty uploaded documents, not answering one question. A single word held that long
reads as a frozen screen rather than as patience. Nothing below about four seconds: the reader
is watching the thing they are waiting for, and a word that changes faster than they can
finish reading it is a fidget. Leave it off everywhere else.
Ellipsis
<koala-ellipsis> is a live ellipsis — three dots taking turns rising, the
messaging-app typing wave — for a label naming work still in flight. A static "…" reads as a
finished sentence; on a row that may sit for half a minute, this is the one quiet signal that
the wait is alive. It inherits colour and size from the text it follows, so inside a badge it
wears the badge's tone, and it is hidden from screen readers because the words carry the
meaning. Reduced motion shows the three dots at rest.
API
ExtraSmallSmallDefaultLargeExtraLargeTailwind classes (text-* track, fill-* arc)truefalse (koala-thinking: draw on the longer words too)0 (default, hold one word)4+ (koala-thinking: a minutes-long wait)