LoadingOverlay

The built-in loadingoverlay tag — a spinner veil over an area that's loading. Usage, options, and live examples.

A built-in tag for a loading veil — a dimming layer with a centered spinner over a box of content, for an area that’s fetching or processing. The tag wraps the block body in a positioned box and lays the veil over it, so it renders right here on the page. Toggle the veil with visible, tune it with the overlay* props, and style the spinner with the loader* props.

Use it as {% loadingoverlay %} in Markdown, or call it from Python logic (loops, snippets) via component('aardvark', 'loadingoverlay', …).

Demonstrations

The covered content is the block body; the veil is on by default (visible=true):

A blurred veil with a custom spinner

overlayBlur frosts the content behind the veil; loaderType, loaderColor, and loaderSize restyle the spinner:

Content revealed (veil hidden)

Set visible=false to lift the veil and show the content underneath. Combined with the overlayRadius and zIndex props, this is how you’d drive the overlay from loading to ready in a real app:

With other components

The body is ordinary Markdown, so the veil can sit over richer content — here a card being “loaded”:

Attributes

CSS Selectors

Target the rendered element through its island marker, [data-aardvark-island="LoadingOverlay"], or through the Mantine Styles API classes:

/* Every rendered LoadingOverlay carries this island marker */
[data-aardvark-island="LoadingOverlay"] { }

/* Mantine Styles API classes */
.mantine-LoadingOverlay-root { }
.mantine-LoadingOverlay-overlay { }
.mantine-LoadingOverlay-loader { }

Injecting Attributes

attr={…} forwards raw HTML attributes — including event handlers — straight onto the rendered element, so you can wire DOM behavior the tag does not expose. The handler can be a full multi-line script, not just one expression — this one logs the value to the console and shows it in an alert: