Spinner

An indeterminate loading ring for "work is happening, duration unknown". Honours the shared variant/size axes and is drawn from --ui-* tokens via currentColor, so it's theme-correct automatically. For a known 0–100%, use Progress.

Default

With no variant, the ring inherits the ambient text colour.

<script>
  import { Spinner } from '@spaethtech/svelte-ui';
</script>

<!-- No variant → inherits the ambient text colour -->
<Spinner />

Variants

primary

secondary

success

info

warning

danger

<script>
  import { Spinner } from '@spaethtech/svelte-ui';
</script>

<Spinner variant="primary" />
<Spinner variant="success" />
<Spinner variant="danger" />

Sizes

sm · 16px

md · 20px

lg · 24px

<!-- size="md" is the default — it can be omitted -->
<Spinner size="sm" variant="primary" />
<Spinner variant="primary" />
<Spinner size="lg" variant="primary" />

On a coloured surface (currentColor)

Omitting variant lets the Spinner adopt the surrounding text colour.

<!-- Omit variant so the ring adopts the surrounding text colour -->
<div class="[background-color:var(--ui-color-primary)] text-white p-4">
  <Spinner label="Loading" />
</div>

Button `loading`

Button gained a loading prop — it swaps a Spinner in for the icon (inheriting the button's text colour) and blocks interaction. Click Save to see it.

force loading