Components Spinners

Spinners

Round, two-arc loading indicator used during search/filter AJAX, on load-more triggers, and inside in-page loading states. The track is rendered via currentColor; the progress arc via currentFill.

<koala-spinner>

Canonical

<koala-spinner />

The default size and colour. Primary-coloured arc on a light gray track.

Variants

5 sizes

Extra small

size="ExtraSmall"

Small

size="Small"

Default

size="Default"

Large

size="Large"

Extra large

size="ExtraLarge"

Size — pass size for any of the five steps.

<koala-spinner size="Large" />

On a dark surface — override track (text-*) and arc (fill-*) colours.

<koala-spinner class="text-primary-container fill-on-primary" />

States

3 states

Default

Gray track, primary arc

On primary

Override classes for dark surfaces

In a button

Pair with the label, disable the control

Props

2 attributes

Attribute	Values	Notes
size	ExtraSmall, Small, Default, Large, ExtraLarge	Defaults to `Default` (w-5 h-5).
class	Tailwind utilities	Override the track/arc colours via `text-X` (track) and `fill-X` (arc).

Do & don't

Do Pair the spinner with a verb. “Saving…” tells the user what the wait is for and why the button is disabled.

Don't Don't drop a bare spinner into a full-page empty state. Use a skeleton with shape — it gives the user something to read while the data lands.