Progress

The built-in progress tag — a progress bar, single-value or multi-segment, with color, size, radius, and striped/animated variants. Usage, options, and live examples.

A built-in tag for a progress bar. The simple form takes a single value (0–100) plus color, size, radius, and the striped / animated toggles. For a multi-segment bar, pass sections as a JSON array of objects — each accepting its own value, color, striped, and animated.

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

Demonstrations

Value

Set value from 0 to 100:

Size, radius, and color

size takes xs–xl or a number of px for the bar height; radius rounds the corners; color sets the fill:

Striped and animated

striped adds diagonal stripes; animated animates them (and implies striped):

Multiple segments

Pass sections as a JSON array — each object is one colored segment. Use it to break a bar into parts (for example, disk usage by category). Each section accepts its own striped and animated flags:

With other components

Label a bar with a {% text %} line above it, grouped in a {% stack %}:

Attributes

CSS Selectors

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

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

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

.mantine-Progress-section {
  /* the section part */
}

Injecting Attributes

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