LoadingOverlay

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

Usage

Best Practices

Prefer local overlays for refresh, save, and recalculation flows where the previous content should remain visible.
Reserve fullscreen for blocking global transitions such as bootstrapping, workspace switching, or destructive flows that cannot continue in parallel.
Keep overlay text action-specific: “Refreshing task queue…” is more useful than a generic “Loading…”.
Do not place first-load empty screens behind TxLoadingOverlay; use TxLoadingState or skeleton components before content exists.

API Reference

Props

Prop	Type	Default	Description
`loading`	`boolean`	`false`	Shows or hides the overlay.
`fullscreen`	`boolean`	`false`	Teleports the overlay to `body` and covers the viewport.
`text`	`string`	`''`	Optional message displayed below the spinner.
`spinnerSize`	`number`	`18`	Spinner size in pixels.
`background`	`string`	`'color-mix(in srgb, var(--tx-bg-color, #fff) 70%, transparent)'`	CSS background used for the overlay mask.

Events

Event	Payload	Description
-	-	No component-specific emits. Control visibility with the `loading` prop.

Slots

Slot	Props	Description
`default`	-	Content rendered below the local overlay when `fullscreen=false`. The fullscreen branch does not render slot content.

Use TxLoadingOverlay for short waits that block one data container while it refreshes. Do not use it as a replacement for first-load screens; use TxLoadingState for first-load states. For table refreshes or task queue recalculation, keep the underlying content visible so the layout does not jump.

Loading demo...

Overview

Local mode wraps the default slot in a position: relative container and renders an absolute overlay above it only while loading=true.
Fullscreen mode teleports the overlay to body, covers the viewport, and receives a fresh shared z-index every time it opens.
background is written to --tx-loading-overlay-bg; the overlay also applies blur and saturation through backdrop-filter.
text is optional. When omitted, only the spinner is rendered inside the overlay card.

Technologies

Accessibility note: The overlay carries role="status" and aria-live="polite", so text is announced by screen readers — you do not need to announce it separately. Fullscreen mode also parks focus on the overlay, traps Tab, and restores the previously focused element on close. The one thing it lacks is modal semantics (no aria-modal), so it is never treated as a dialog; reach for TxModal or TxDialog when you need a real modal.
Verified coverage: loading-overlay.test.ts checks local overlay rendering, custom background/spinner size/text, closed-state slot preservation, fullscreen teleport, and absence of the local container in fullscreen mode.
Component source: packages/tuffex/packages/components/src/loading-overlay/src/TxLoadingOverlay.vue.
Types/export: packages/tuffex/packages/components/src/loading-overlay/index.ts exports LoadingOverlayProps, LoadingOverlay, TxLoadingOverlay, and TxLoadingOverlayInstance.
Coverage: packages/tuffex/packages/components/src/loading-overlay/__tests__/loading-overlay.test.ts verifies local and fullscreen branches.

查看源码

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

Usage

Best Practices

API Reference

Props

Events

Slots

In-Container Overlay

LoadingOverlay (container)

Fullscreen Overlay

LoadingOverlay (fullscreen)

Dashboard Task Overlay

Dashboard task feedback center

Overview

Technologies