Usage

Spinner shows a loading state when the duration of a process is unknown.

<script setup lang="ts">
import { Spinner } from '@astryx-vue/core/Spinner'
</script>

<template>
  <Spinner label="Loading data" />
</template>

Best practices

Guidance	Practices
Do	Provide a meaningful label to describe what is loading for screen reader users.
Do	Use the "onMedia" shade when placed on dark or accent-colored backgrounds.
Don't	Use for content areas with known dimensions; use Skeleton to preserve layout instead.
Don't	Stack multiple spinners in the same view; use one to represent the overall loading state.

Examples

Basic

The default spinner uses the accent color and the md size.

Sizes

sm

md

lg

xl

Use sm, md, lg, or xl. The ring diameter is 10px, 14px, 18px, or 28px.

Shades

default

subtle

onMedia

inherit

default and subtle suit light backgrounds. onMedia suits dark or accent backgrounds. inherit takes the surrounding text color.

Label

Loading data

A visible label appears below the spinner and names it for screen readers.

Accessibility

A Spinner has no visible text of its own, so its loading state reaches assistive technology entirely through ARIA attributes. The component sets these for you, and you normally do not need to manage them yourself; the list below covers the attributes it actually uses and what each one does.

• The root element carries role="status", so assistive technology treats it as a status region.
• When you pass a string label, it shows as visible text below the spinner and provides the accessible name through aria-labelledby.
• Without a label, the accessible name defaults to Loading; pass aria-label to change it to something more specific to the context.
• The ring is aria-hidden and carries no text of its own, so it is not read out separately.
• With reduced motion enabled, the arc slows to a 3-second cycle.