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
— 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.
API
ExtraSmallSmallDefaultLargeExtraLargeTailwind classes (text-* track, fill-* arc)truefalse (koala-thinking: draw on the longer words too)