Koala logo Design
No matches for “
↑↓ navigate open Esc close
PrimitivesFeedbackSpinner

Spinner

Round two-arc indicator for an in-flight AJAX or button loading state.

<koala-spinner>

Size

ExtraSmall
Small
Default
Large
ExtraLarge

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.

Thinking…

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.

Thinking…
Thinking…

API

size ExtraSmallSmallDefaultLargeExtraLarge
class Tailwind classes (text-* track, fill-* arc)
roomy truefalse (koala-thinking: draw on the longer words too)