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 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.

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…

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.

After a label
Looking up
In a badge
Looking up

API

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