Loader

Spinner, DotsLoader, Skeleton and LoadingOverlay — the loading-state family.

Four loading affordances for four situations: Spinner for buttons and inline busy states, DotsLoader for quieter inline waits, Skeleton for content placeholders, and LoadingOverlay for covering a region while work is in flight.

Installation

import { Spinner, DotsLoader, Skeleton, LoadingOverlay } from "@iammikz/srui";

Usage

LoadingOverlay

LoadingOverlay covers its nearest positioned ancestor (add relative to the container). It delays appearing by delayMs and stays visible at least minDisplayMs, so quick operations never flash a spinner.

Some content that gets covered while loading.

<div className="relative min-h-40">
  {/* content */}
  <LoadingOverlay active={busy} label="Fetching data…" />
</div>

LoadingOverlay props

Prop	Type	Default	Description
`active`	`boolean`	—	Whether work is in flight
`label`	`string`	`"Loading…"`	Announced (`aria-live="polite"`) and rendered; English default, override for i18n
`delayMs`	`number`	`200`	Delay before the overlay appears
`minDisplayMs`	`number`	`400`	Minimum time it stays visible once shown
`variant`	`"spinner" \| "dots"`	`"spinner"`	Which indicator to render

Examples

Skeleton layout

Slow spinner variant

Accessibility

LoadingOverlay renders role="status" with aria-live="polite" and the label text, so screen readers announce loading start/end without interrupting.
Spinner and DotsLoader are role="presentation" — they are visual only; provide text (or an sr-only label) next to them when they appear alone.
Every animation is motion-safe:-gated; reduced-motion users see final states, never a stuck half-drawn element.