Skeleton

The built-in skeleton tag — a shimmering placeholder for content that hasn't loaded, with height, width, radius, circle, visible, and animate. Usage, options, and live examples.

A built-in tag for a loading placeholder — a shimmering grey block that stands in for content that hasn’t loaded yet. Set a height (and optionally a width), radius, or circle for an avatar shape. Wrap real content as the block body and reveal it with visible=false; animate=false stops the shimmer.

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

Demonstrations

Lines

Set a height and an optional width to mock up text lines:

Source: Markdown

Source: Python

Circle and radius

circle makes an avatar-shaped placeholder (width and radius track the height); radius rounds a rectangular one:

Source: Markdown

Source: Python

Static (no shimmer)

animate=false keeps a plain grey placeholder with no shimmer animation:

Source: Markdown

Source: Python

Wrapping content

Wrap real content as the block body and reveal it with visible=false — the skeleton overlays the content while visible is true:

This content shows through once visible=false.

Source: Markdown

Source: Python

With other components

Compose a few skeletons into a card-style placeholder — a circle avatar beside two lines, all inside a {% paper %}:

Source: Markdown

Source: Python

Attributes

Attribute	Valid values	Description
`height`	A number (px → rem) or any CSS value	Block height.
`width`	A number or CSS value	Block width. Defaults to `100%`; ignored when `circle` is set.
`radius`	`xs`, `sm`, `md`, `lg`, `xl`, or any CSS value	Corner rounding of a rectangular placeholder.
`circle`	bool (default `false`)	Render a circle (width and radius track the height) — good for an avatar placeholder.
`visible`	bool (default `true`)	When `false`, show the wrapped block body instead of the shimmer.
`animate`	bool (default `true`)	Toggle the shimmer animation.
(body)	Markdown	Content the skeleton overlays; revealed when `visible=false` (`children=` from Python).

CSS Selectors

Each skeleton carries data-aardvark-island="Skeleton" on its wrapper, and Mantine exposes its parts as mantine-Skeleton-* classes — target either to style it from your theme CSS.

[data-aardvark-island="Skeleton"] {
  /* style every skeleton on the page */
}

.mantine-Skeleton-root {
  /* the root part */
}

Injecting Attributes

attr={…} forwards raw HTML attributes (including event handlers) straight onto the rendered element.

Source: Markdown

Source: Python