Loading Overlay

Loading screen. Free, MIT · Overlays and notifications › Messages and status

Blocks a region while it loads. Without fullscreen it fills its parent, which must be positioned (e.g. position: relative), and marks that parent aria-busy.

Installation

npx valyro-cli@latest add loading-overlay

npx shadcn@latest add https://valyro.xyz/r/loading-overlay.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { LoadingOverlay } from 'valyro-ui';

Props

Prop	Type	Default
`visible` *	`boolean`		Shows the overlay with a fade. Unless `fullscreen`, the covered parent gets `aria-busy` meanwhile.
`fullscreen`	`boolean`	`false`	Cover the whole viewport instead of the nearest positioned parent.
`message`	`ReactNode`		Text under the spinner, announced politely to screen readers.
`progress`	`number`		0–100; shows a determinate progress bar.
`label`	`string`	`'Loading'`	Announced to screen readers when there is no `message`.

Related components

Alert — Inline alerts
Toast — Pop-up notifications
Notification Center — Notification inbox
Dialog — Modal dialogs
Confirm Dialog — Action confirmation
Drawer — Slide-out panels
Bottom Sheet — iOS-style bottom sheet: snap points, swipe, peek mode
Popover — Floating content
Hover Card — Card on hover
Tour — Onboarding tour: element spotlight, steps, progress and resume

Previous: Notification Center · Next: Dialog · All Overlays and notifications