Spinner

Interactive example

Installation

npm install @morphos/feedback

pnpm add @morphos/feedback

yarn add @morphos/feedback

bun add @morphos/feedback

Import

import { Spinner } from '@morphos/feedback'

Usage

<Spinner aria-label="Loading user data" />

Props

Prop	Type	Default	Description
`aria-label`	`string`	`"Loading"`	Describes what is loading for screen readers
`class`	`string`	—	CSS class for applying the animation
`id`	`string`	—	`id` on the root element

Accessibility

Spinner renders as role="status" with aria-busy="true" and aria-live="polite". Screen readers announce the aria-label when the spinner appears.

Styling example

Spinner is purely semantic — it has no built-in visual. Apply a CSS animation via the class prop:

.morphos-spinner {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--morphos-color-border);
  border-top-color: var(--morphos-color-accent);
  border-radius: var(--morphos-radius-full);
  animation: morphos-spin 0.7s linear infinite;
}

@keyframes morphos-spin {
  to { transform: rotate(360deg); }
}

<Spinner class="morphos-spinner" aria-label="Saving…" />

For long-running operations, pair the spinner with a visible text label so users who cannot perceive the animation still understand that work is in progress.