Semi-circle progress

The built-in semicircleprogress tag — a half-circle gauge with a center label, thickness, orientation, fill direction, and segment colors. Usage, options, and live examples.

A built-in tag for a half-circle (gauge) progress indicator. Set value (0–100) and, optionally, a label, the gauge size and thickness, an orientation (up or down), a fillDirection, the labelPosition, and the filled / empty segment colors.

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

Demonstrations

Value and label

The minimal form — a value and an optional label:

Colors and thickness

filledSegmentColor colors the filled arc, emptySegmentColor the empty track, and thickness sets the arc width in px:

Orientation, fill direction, and label position

orientation='down' flips the gauge; fillDirection='right-to-left' fills the other way; labelPosition='center' moves the label into the arc:

With other components

Caption a gauge with a {% text %} heading, grouped in a centered {% stack %}:

Attributes

CSS Selectors

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

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

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

.mantine-SemiCircleProgress-filledSegment {
  /* the filledSegment part */
}

.mantine-SemiCircleProgress-emptySegment {
  /* the emptySegment part */
}

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

Injecting Attributes

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