Components / Display

Spinner

A compact, reduced-motion-aware loading indicator.

Preview

Publishing release

Step 3 of 4

Install

Run in your project

npx @getweini/cli@latest add spinner

Use cases

Short action

Indicate that a save or refresh is working inside its button.

Loading section

Pair motion with text while one dashboard section refreshes.

Usage example

Vue

<button type="button" aria-busy="true" class="inline-flex items-center gap-2">
  <Spinner />
  Saving
</button>

More examples

Saving button

Keep the visible action text and busy state together.

Saving button

<script setup lang="ts">
import Button from './components/ui/button/Button.vue'
import Spinner from './components/ui/spinner/Spinner.vue'
</script>

<template>
  <Button disabled aria-busy="true"><Spinner size="sm" /> Saving changes…</Button>
</template>

Results loading

A labelled spinner can stand alone when the text cannot fit beside it.

Results loading

<script setup lang="ts">
import Spinner from './components/ui/spinner/Spinner.vue'
</script>

<template>
  <section aria-busy="true" aria-label="Refreshing results">
    <Spinner label="Loading results" />
  </section>
</template>

Key API

The most useful props, models, slots, events, and methods for this component.

Key API for Spinner
Name	Type	Default or requirement
`size`	sm \| md \| lg	md
`label`	string	undefined

Spinner is decorative without label. Prefer visible status text and aria-busy on the surrounding region.

Implementation notes

Prefer Progress when a measurable completion value is available.
Keep the loading indicator scoped to the content or action that is waiting.

Accessibility and localization

Without label, Spinner is decorative; use visible text or label its containing region.