Spinner

SSpinner is a loading indicator (a spinning ring). Pure CSS. It is decorative by default (aria-hidden); set label to announce the loading state to screen readers (role="status").

Sizes and variants

<template>
  <SSpinner size="sm" />
  <SSpinner size="lg" />
  <SSpinner variant="neutral" />
  <SSpinner label="Loading" />
</template>

In a button

<template>
  <SButton disabled>
    <template #leading
      ><SSpinner
        size="sm"
        variant="current"
    /></template>
    Loading…
  </SButton>
</template>

Color

The color prop sets a color from the palette and overrides variant.

<template>
  <SSpinner color="indigo" />
  <SSpinner color="blue-grey" />
</template>

API

Props

Name	Type	Default	Description
size	"md" | "sm" | "lg"	"md"	Size: sm, md, or lg.
variant	| "primary" | "neutral" | "current"	"primary"	Color: accent (primary), neutral (neutral), or inherited (current).
color	string	undefined	Accent color: a name from the palette (primary/teal/teal-10). Overrides variant.
label	string	undefined	Accessible name for screen readers (otherwise the spinner is decorative).