Spinners

Use the koala-spinner tag helper for in-page loading indicators (search-while-typing, load-more, autocomplete, AJAX-in-flight overlays). Renders the standard two-arc rotating SVG with a brand-coloured arc on a light gray track.

Default

Default size (20×20) — matches text input height.

<koala-spinner />

Sizes

Use the size attribute to scale.

<koala-spinner size="ExtraSmall" />
<koala-spinner size="Small" />
<koala-spinner size="Default" />  <!-- the default -->
<koala-spinner size="Large" />
<koala-spinner size="ExtraLarge" />

Colour override

Defaults to text-gray-200 fill-brand. Override either via the class attribute. Track colour comes from currentColor (Tailwind text-*); arc colour comes from currentFill (fill-*).

<!-- on a brand-colored background -->
<koala-spinner class="text-white/30 fill-white" />
<koala-spinner class="text-emerald-100 fill-emerald-600" />
<koala-spinner class="text-rose-100 fill-rose-600" />

Toggling visibility with Alpine

Pass-through any x-* attribute. Common pattern: tie to a loading flag.

<koala-spinner x-show="loading" x-cloak />

Usage guidance

Do	Don't
Use for short, in-page AJAX (search, autocomplete, load-more)	Use on submit buttons — use `koala-loading` instead
Pair with `x-show="loading" x-cloak` to hide until needed	Use as a page-load indicator (use skeletons instead)
Match colours to the surrounding background (override class on dark/coloured backgrounds)	Inline copy the SVG — always use the tag helper