Loader

The built-in loader tag — a spinner in three styles (oval, bars, dots), with size and color. Usage, options, and live examples.

A built-in tag for a loading spinner. It takes no body — drop it wherever something is loading and set any of the options below, or none for the default oval spinner. The three type styles (oval, bars, dots), a size, and a color cover every variant.

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

Demonstrations

Types

The three spinner styles — oval (the default), bars, and dots:

Size and color

size takes xs–xl or a number of px; color takes any theme color or CSS value:

With other components

A loader sits naturally beside other inline content — here next to a button, as an in-progress affordance:

Attributes

CSS Selectors

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

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

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

Injecting Attributes

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