Loading Overlay

Display a loading layer over existing content with configurable sizes, variants, radius, blur, spinner, text, and states.

Import

import { LoadingOverlay } from "@shivms/ui";

Explore loading overlay sizes, variants, border radius, blur effects, spinner visibility, loading text, and component states using the examples below.

Basic

Default

This content is covered while the loading overlay is visible.

Sizes

Extra Small

This content is covered while the loading overlay is visible.

Small

This content is covered while the loading overlay is visible.

Medium

This content is covered while the loading overlay is visible.

Large

This content is covered while the loading overlay is visible.

Extra Large

This content is covered while the loading overlay is visible.

Variants

Default

This content is covered while the loading overlay is visible.

Light

This content is covered while the loading overlay is visible.

Dark

This content is covered while the loading overlay is visible.

Transparent

This content is covered while the loading overlay is visible.

Radius

None

This content is covered while the loading overlay is visible.

Small

This content is covered while the loading overlay is visible.

Medium

This content is covered while the loading overlay is visible.

Large

This content is covered while the loading overlay is visible.

Full

This content is covered while the loading overlay is visible.

Blur

Enabled

This content is covered while the loading overlay is visible.

Disabled

This content is covered while the loading overlay is visible.

Spinner

Visible

This content is covered while the loading overlay is visible.

Hidden

This content is covered while the loading overlay is visible.

Text

With Text

This content is covered while the loading overlay is visible.

Without Text

This content is covered while the loading overlay is visible.

States

Default

This content is covered while the loading overlay is visible.

Loading

This content is covered while the loading overlay is visible.

Disabled

This content is covered while the loading overlay is visible.