LoadingOverlay | Tuff Docs

<script>
import { ref } from 'vue'
const loading = ref(false)
</script>

Usage

The mask covers the default slot, and the content underneath stays visible.

Loading demo...

fullscreen teleports the mask to body to cover the viewport and skips the default slot.

Loading demo...

A local overlay combined with Toast, Tooltip, and Spinner; the task queue stays visible while it refreshes, so the layout doesn't jump.

Loading demo...

Use a local overlay for short waits over existing content — refresh, save, recalculate — so the old content stays visible.
Reserve fullscreen for flows that must block the whole app, such as startup, workspace switching, or destructive work that can't run in parallel.
Name the action in the text: "Refreshing task queue…" beats a generic "Loading…".
Before first content exists, use TxLoadingState or a skeleton, not an overlay.

Prop	Type	Default	Description
`loading`	`boolean`	`false`	Shows the overlay.
`fullscreen`	`boolean`	`false`	Teleports to `body` and covers the viewport.
`text`	`string`	`''`	Text below the spinner; without it, only the spinner shows.
`spinnerSize`	`number`	`18`	Spinner size in px.
`background`	`string`	`'color-mix(in srgb, var(--tx-bg-color, #fff) 70%, transparent)'`	Mask background, written to `--tx-loading-overlay-bg`.

Slot	Props	Description
`default`	-	Content the local overlay covers; not rendered in fullscreen mode.

Local mode wraps the default slot in a position: relative container and renders the absolute mask only while loading.
Fullscreen mode takes a fresh shared z-index each time it opens.
The mask has role="status" and aria-live="polite", so screen readers announce text; no extra announcement is needed.
Fullscreen mode parks focus on the mask and traps Tab, then returns focus to the previous element on close.
The mask has no modal semantics (no aria-modal); use TxModal or a Dialog component when you need a modal.

packages/tuffex/packages/components/src/loading-overlay/index.ts