Spinner

The built-in spinner tag — an SVG loading spinner with animation variants, segment shapes, gradient colors, glow, and a determinate progress mode.

spinner is an SVG-based loading spinner with several animation variants, configurable segment shapes, gradient colors, glow, and a determinate progress mode. Drop it in wherever something is loading, or drive progress for a percentage-based indicator.

A Community Component — wraps Spinner by gfazioli, MIT licensed, installed from npm as @gfazioli/mantine-spinner.

Demonstrations

A bare {% spinner %} renders the default animated spinner.

{% spinner %}

Variants

Set variant to one of fade, pulse, grow, or trail for different animation styles.

{% group %}
{% spinner variant='fade' %}
{% spinner variant='pulse' %}
{% spinner variant='grow' %}
{% spinner variant='trail' %}
{% endGroup %}

Segments and shapes

segments sets how many spokes the spinner draws, and segmentShape (line, dot, or arc) sets their shape.

{% group %}
{% spinner segments=8 segmentShape='line' %}
{% spinner segments=12 segmentShape='dot' %}
{% spinner segments=6 segmentShape='arc' %}
{% endGroup %}

Color and gradient

Set a color (any theme color), or pass gradientFrom / gradientTo for a two-color gradient sweep.

{% group %}
{% spinner color='grape' size='lg' %}
{% spinner gradientFrom='indigo' gradientTo='cyan' size='lg' %}
{% endGroup %}

Determinate progress

Pass progress (0–100) to turn the spinner into a determinate indicator. The body renders in the center, so you can show the percentage.

{% spinner progress=68 size='xl' %}68%{% endSpinner %}

68%

Glow

glow adds a colored bloom around the spinner.

{% spinner color='cyan' glow=8 size='lg' %}

With other components

Spinners compose with the other built-in tags. Here one sits inside a card next to loading copy.

{% card title="Deploying" %}
{% group %}
{% spinner variant='trail' color='blue' %}
Pushing your site to the edge…
{% endGroup %}
{% endCard %}

Deploying

Pushing your site to the edge…

Attributes

Omit any attribute to take its default. Numeric attributes keep a deliberate 0.

Attribute	Valid values	Description
`variant`	`fade`, `pulse`, `grow`, `trail`	Animation style.
`segments`	Integer	Number of spinner segments (spokes).
`segmentShape`	`line`, `dot`, `arc`	Shape of each segment.
`size`	`xs`–`xl` or a number of px	Overall spinner size.
`thickness`	Number	Stroke thickness of each segment.
`inner`	Number	Inner radius of the spinner.
`color`	Any theme color or CSS color	Spinner color.
`direction`	`clockwise`, `counter-clockwise`	Rotation direction.
`duration`	Number (seconds)	One full animation cycle’s duration.
`glow`	Number	Glow / bloom intensity (`0` = none).
`progress`	`0`–`100`	Determinate progress; renders a fixed indicator.
`minOpacity`	Number (0–1)	Lowest opacity a fading segment reaches.
`hueRotate`	`true` / `false` (default `false`)	Cycle segment hues for a rainbow effect.
`gradientFrom`	Any theme color or CSS color	Gradient start color.
`gradientTo`	Any theme color or CSS color	Gradient end color.
`attr={…}`	An object of HTML attributes	Forwards raw HTML attributes onto the rendered element.

The block body (between {% spinner %} and {% endSpinner %}) renders in the center of the spinner — handy for a progress percentage.

CSS Selector

The spinner is rendered as an SVG element. Its size is driven by the --spinner-size CSS custom property (set from the size prop and any responsive size object via media queries), so you can override sizing from your own stylesheet:

.my-loader svg {
  --spinner-size: 64px;
}

Target a specific instance by forwarding a class with attr={…} (see below).

Injecting Attributes

The attr={…} channel forwards raw HTML attributes straight onto the rendered spinner element — use it for id, class, data-*, ARIA attributes, or anything else not exposed as a typed parameter.

Source: Markdown

Source: Python