LoadingOverlay

Use LoadingOverlay when content should stay visible but temporarily blocked during loading, saving, syncing, or long-running actions.

import { ref } from 'vue' const loading = ref(false)

In-Container Overlay

LoadingOverlay (container)

Demo will load when visible.

<template>
  <TxButton @click="loading = !loading">Toggle</TxButton>
  <TxLoadingOverlay :loading="loading" text="Loading...">
    <div style="height: 120px; display: flex; align-items: center; justify-content: center;">Content</div>
  </TxLoadingOverlay>
</template>

Fullscreen Overlay

LoadingOverlay (fullscreen)

Demo will load when visible.

<template>
  <TxButton @click="loading = !loading">Toggle</TxButton>
  <TxLoadingOverlay fullscreen :loading="loading" text="Loading..." />
</template>

API

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`	-	CSS background used for the overlay mask.