Ring progress

The built-in ringprogress tag — a circular donut progress ring with one or more colored sections, a center label, thickness, size, and rounded caps. Usage, options, and live examples.

A built-in tag for a circular (donut) progress ring. Pass sections as a JSON array of {value, color} objects — one arc per object — and optionally set a center label, the size and thickness in px, and roundCaps for rounded arc ends.

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

Demonstrations

Single section

The minimal form — one section and a center label:

Multiple sections

Each object in sections is one colored arc; the values stack around the ring. size sets the ring’s width and height in px:

Thickness and rounded caps

thickness sets the arc width in px; roundCaps rounds the ends of each arc:

With other components

Pair a ring with a caption underneath, grouped in a centered {% stack %}:

Attributes

CSS Selectors

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

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

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

.mantine-RingProgress-svg {
  /* the svg part */
}

.mantine-RingProgress-curve {
  /* the curve part */
}

.mantine-RingProgress-label {
  /* the label part */
}

Injecting Attributes

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