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, held until the work finishes. It rotated once and the interval was tuned four times without landing: 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.
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)