Spinner

The Spinner component tells the user that something is on its way. Use it while data loads, while a form is being sent, or inside a button that is busy. Use the Progress bar instead when you know how far along the work is.

Example

Import the component and place it where the content will appear. It carries the text "Loading" for screen readers, so nothing else is needed for it to be announced.

Svelte 
<script>
  import { Spinner } from "theui-svelte";
</script>

<Spinner />

Variants

The variant prop picks the shape: ring (default), dots or ping.

Svelte 
<Spinner variant="ring" />
<Spinner variant="dots" />
<Spinner variant="ping" />

Sizes

Sizes run from xs to xl, with md as the default. Every variant takes the same sizes.

Svelte 
<Spinner size="xs" />
<Spinner size="sm" />
<Spinner size="md" />
<Spinner size="lg" />
<Spinner size="xl" />

Colors

The spinner is drawn in the current text colour, so a text colour class is all it takes to recolour it. The default is your brand colour.

Svelte 
<Spinner />
<Spinner class="text-info-500" />
<Spinner class="text-success-500" variant="dots" />
<Spinner class="text-error-500" variant="ping" />
<Spinner class="text-muted" />

With Text

Put text inside the component to show a visible message next to the spinner. The hidden "Loading" text is dropped in that case, because your own text is read instead.

Svelte 
<Spinner>Loading your data...</Spinner>
<Spinner variant="dots" class="text-muted">Please wait</Spinner>

In a Button

A spinner sits happily inside a button while the form is being sent. Keep the button disabled until the work is done.

Svelte 
<button class="inline-flex items-center gap-2 ..." disabled>
  <Spinner size="xs" class="text-on-brand" label="Saving" />
  Saving...
</button>

Customization

The class prop styles the wrapper, which is where the colour and the gap live, and spinnerClasses styles the moving shape itself, such as its border width.

Svelte 
<Spinner size="lg" spinnerClasses="border-4 border-brand-500 border-e-transparent" />
<Spinner size="lg" spinnerClasses="border-dotted" />
<Spinner size="lg" class="gap-4 text-info-500 font-semibold">Uploading</Spinner>

Accessibility

The spinner is a live status: it carries role="status" and a hidden label, set with the label prop, so a screen reader announces that something is loading without moving focus. Change label to say what is happening, such as "Saving" or "Sending", when several things can load on one page. For people who prefer reduced motion the animation slows down instead of stopping, so the message is still there. If the wait is long, tell the user what to expect in text rather than leaving a spinning shape alone.

Configuration