Loading overlay

43 · Extended UI

Covers an area with a semi-transparent layer while an operation runs and blocks clicks on it. It is bound to a Livewire action or an Alpine expression.

PRO acun:loading-overlay

With Alpine

show is an Alpine expression; the overlay is visible as long as it is true. The overlay covers the nearest relative container, so give the area to lock the relative class.

LIVE EXAMPLE

<div class="relative rounded-sm border border-gray-200 p-6 dark:border-zinc-700" x-data="{ locked: false }">
    <p class="text-sm text-gray-600 dark:text-zinc-400">This area is locked while the report is being prepared.</p>
    <acun:button class="mt-4" size="sm" x-on:click="locked = true; setTimeout(() => locked = false, 2000)">Prepare report</acun:button>
    <acun:loading-overlay show="locked" label="Preparing" />
</div>

Prop	Values
`show`	Alpine expression

Label

label adds visible text next to the indicator and has screen readers read it too; without it, only the indicator is visible. In this example, the overlay is always on because neither show nor target is given.

LIVE EXAMPLE

<div class="grid gap-4 sm:grid-cols-2">
    <div class="relative h-32 rounded-sm border border-gray-200 p-4 dark:border-zinc-700">
        <p class="text-sm text-gray-600 dark:text-zinc-400">Customer list</p>
        <acun:loading-overlay />
    </div>
    <div class="relative h-32 rounded-sm border border-gray-200 p-4 dark:border-zinc-700">
        <p class="text-sm text-gray-600 dark:text-zinc-400">Sales report</p>
        <acun:loading-overlay label="Preparing the report" />
    </div>
</div>

Prop	Values
`label`	Text next to the indicator

With Livewire

target takes the name of one Livewire action or property, or several separated by commas (wire:target). The overlay is visible only while these requests run.

BLADE

<div class="relative">
    <acun:table>…</acun:table>
    <acun:loading-overlay target="search,sort,gotoPage" />
</div>

Prop	Values
`target`	Action name \| name1,name2

API

Props and slots

The values the component accepts.

Prop	Default	Description
`target`	`null`	Livewire action (wire:target); several separated by commas
`show`	`null`	Alpine expression; visible while true
`label`	`null`	Visible text and screen reader label