Preview

Installation

npx sigma-ui@latest add spinner

Usage

<script setup lang="ts">
import { Spinner } from '@/components/ui/spinner';
</script>

<template>
  <Spinner />
</template>

Set label to change the accessible name. The default is "Loading".

Examples

Sizes

API Reference

Spinner

Props

Prop	Type	Default
label Accessible name announced while the spinner is visible.	string	"Loading"

Accessibility

The spinner renders role="status" and an aria-label, so screen readers announce it. It is not focusable. Hide it, or render it only while work is in progress, so the status is not announced after loading finishes.

Key	Description
Tab	Moves focus past the spinner.