build69 / Components / Feedback & Status / SpinnerOverlay

SpinnerOverlay

v1.0.2Updated 20 Jul 2026

Full-page or container-overlay loading state. Three layouts: fixed full-viewport with blur (screen), absolute fill of a relative parent (card), and inline spinner + label (inline).

View source ← Back to catalog

Preview

Live · 7 stories

Screen OverlayOpen ↗

▸Why this is recommendedloadingspinneroverlayfeedback+2

SpinnerOverlay — screen overlay.

Recommended for+14

✓Page-level async operations (route transitions, save)
✓Tile-level refresh
✓Form-submission lock
✓Inline "loading more" labels

Tags+6

loadingspinneroverlayfeedbackblockingscreen

Features+4

screen variant: fixed inset-0 + backdrop blur
card variant: absolute fill of relative parent
inline variant: inline-flex spinner + optional label
Pointer-event blocking toggle
role="status" + aria-live polite
i18n: labels prop overrides the built-in sr-only "Loading" announcement (SpinnerOverlayLabels / DEFAULT_SPINNER_OVERLAY_LABELS)

Not recommended for−2

✕First-paint placeholders (use Skeleton)
✕Determinate progress (use Progress)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "SpinnerOverlay" })

Usage

import { SpinnerOverlay } from '@/components/feedback/spinner-overlay';

<div className="relative">
  <Card>...</Card>
  <SpinnerOverlay show={loading} variant="card" label="Saving..." />
</div>

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired

show

Toggle visibility

booleanyes

variant

Layout

'screen' | 'card' | 'inline'—

label

Status label

ReactNode—

blockPointer

Block pointer events behind overlay

boolean—

labels

Override the built-in sr-only "Loading" announcement (i18n). Merged over DEFAULT_SPINNER_OVERLAY_LABELS.

Partial<SpinnerOverlayLabels>—

Platform docs All components Source files

SpinnerOverlay

Preview

Install

Usage

Props

Related