Spinner Component — Astro

Spinner Component

An accessible loading spinner for indicating progress when content is loading. Uses role="status" and an aria-label (default: "Loading") so screen readers announce the state. Supports multiple sizes and color variants.

Add this component

The command below includes <strong>Spinner</strong>—run it in your project directory to install this component (and the CSS if needed). No prompts.

Choose your package manager — click a tab to select, then copy the command.

npm pnpm yarn bun

bash bash Copy code

npx rizzo-css add Spinner

bash bash Copy code

pnpm dlx rizzo-css add Spinner

bash bash Copy code

npx rizzo-css add Spinner

bash bash Copy code

bunx rizzo-css add Spinner

Props

• size (string, optional) - sm, md, lg (default: md)
• variant (string, optional) - primary, success, warning, error, info (default: primary)
• label (string, optional) - Accessible label for screen readers (default: "Loading")
• class (string, optional) - Additional CSS classes

Basic Usage

---
import Spinner from '../components/astro/Spinner.astro';
---

<Spinner />

<!-- Rizzo CSS. No script needed. -->
<div class="spinner spinner--md spinner--primary" role="status" aria-label="Loading"></div>

<script>
  import { Spinner } from '$lib/rizzo';
</script>

<Spinner />

<script setup>
import Spinner from '@/components/rizzo/Spinner.vue';
</script>

<template>
  <Spinner />
  <Spinner variant="success" size="lg" />
</template>

import { Spinner } from './components/react';

<Spinner />
<Spinner variant="success" size="lg" />

Sizes

<Spinner size="sm" />
<Spinner size="md" />
<Spinner size="lg" />

Variants

<Spinner variant="primary" />
<Spinner variant="success" />
<Spinner variant="warning" />
<Spinner variant="error" />
<Spinner variant="info" />

Custom Label

Use the label prop to describe the loading context for screen readers (e.g. "Loading results", "Saving…").

<Spinner label="Loading results…" />

Features

• Accessible - role="status" and aria-label so screen readers announce loading
• Variants - Primary, success, warning, error, info using theme variables
• Sizes - sm, md, lg
• Reduced motion - Animation disabled when user prefers reduced motion; static segment shown instead

Other frameworks: Vanilla · Svelte · Vue · React