Components

Loading Overlay

A veil with a spinner shown over its content while busy.

php artisan blatui:add loading-overlay

Monthly report

Revenue is up 12% over the previous period, with new sign-ups leading the gain.

Loading…

{{-- The veil is shown over the content while busy. --}}
<x-ui.loading-overlay :show="true" message="Loading…" class="max-w-sm">
    <x-ui.card>
        <h3 class="font-semibold">Monthly report</h3>
        <p class="text-muted-foreground mt-1 text-sm">
            Revenue is up 12% over the previous period, with new sign-ups leading the gain.
        </p>
    </x-ui.card>
</x-ui.loading-overlay>

Toggle

Account activity

You signed in from 3 devices this week. No unusual activity was detected.

Fetching data…

{{-- A button flips the overlay's visibility. An outer Alpine scope holds `loading`;
     `x-effect` on the overlay mirrors it into the overlay's own `show` state. --}}
<div x-data="{ loading: false }" class="flex flex-col items-center gap-4">
    <x-ui.loading-overlay x-effect="show = loading" message="Fetching data…" class="w-full max-w-sm">
        <x-ui.card>
            <h3 class="font-semibold">Account activity</h3>
            <p class="text-muted-foreground mt-1 text-sm">
                You signed in from 3 devices this week. No unusual activity was detected.
            </p>
        </x-ui.card>
    </x-ui.loading-overlay>

    <x-ui.button variant="outline" @click="loading = !loading">
        <span x-text="loading ? 'Stop loading' : 'Start loading'">Start loading</span>
    </x-ui.button>
</div>

API Reference

Props, slots and exposed methods for <x-ui.loading-overlay>.

Props

Prop	Type	Default	Description
`show`	`bool`	`false`	Whether the veil is shown over the content. Sets the initial state; drive it reactively from a parent scope (e.g. x-effect="show = loading") to toggle it at runtime.
`message`	`string`	—	Text shown under the spinner and announced to assistive tech. Defaults to "Loading…" when omitted.
`blur`	`bool`	`true`	Apply a backdrop blur to the veil behind the spinner.

Slots

Slot	Description
`default`	The content the overlay covers while busy. The wrapper is position:relative, so the veil is absolutely positioned over exactly this content.