# Progress

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:



<br>

Source: Markdown

```aardvark
{% progress value=65 %}
```


Source: Python

```python
component('aardvark', 'progress', value=65)
```



### 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:





<br>

Source: Markdown

```aardvark
{% progress value=30 size="sm" color="grape" %}
{% progress value=75 size="xl" radius="xl" color="cyan" %}
```


Source: Python

```python
component('aardvark', 'progress', value=30, size='sm', color='grape')
component('aardvark', 'progress', value=75, size='xl', radius='xl', color='cyan')
```



### Striped and animated

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





<br>

Source: Markdown

```aardvark
{% progress value=55 striped=true %}
{% progress value=55 animated=true color="orange" %}
```


Source: Python

```python
component('aardvark', 'progress', value=55, striped=True)
component('aardvark', 'progress', value=55, animated=True, color='orange')
```



### 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:





<br>

Source: Markdown

```aardvark
{% progress sections='[{"value":35,"color":"cyan"},{"value":25,"color":"orange"},{"value":15,"color":"grape"}]' size="xl" %}
{% progress sections='[{"value":40,"color":"teal","striped":true},{"value":20,"color":"red","animated":true}]' size="lg" radius="md" %}
```


Source: Python

```python
component('aardvark', 'progress', size='xl', sections=(
    '[{"value":35,"color":"cyan"},'
    '{"value":25,"color":"orange"},'
    '{"value":15,"color":"grape"}]'))
component('aardvark', 'progress', size='lg', radius='md', sections=(
    '[{"value":40,"color":"teal","striped":true},'
    '{"value":20,"color":"red","animated":true}]'))
```



## With other components

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




Storage used — 70%





<br>

Source: Markdown

```aardvark
{% stack gap="xs" %}
{% text size="sm" fw="500" %}Storage used — 70%{% endText %}
{% progress value=70 color="teal" %}
{% endStack %}
```


Source: Python

```python
component('aardvark', 'text', size='sm', fw='500', children='Storage used — 70%')
component('aardvark', 'progress', value=70, color='teal')
```



## Attributes

| Attribute | Valid values | Description |
| --- | --- | --- |
| `value` | A number 0–100 | Fill percentage (simple, single-segment form). |
| `color` | Any theme color or a CSS color value | Bar color. |
| `size` | `xs`, `sm`, `md`, `lg`, `xl`, or a number of px | Bar height. Defaults to Mantine's `md`. |
| `radius` | `xs`, `sm`, `md`, `lg`, `xl`, or a CSS value | Corner rounding. |
| `striped` | bool (default `false`) | Add diagonal stripes. |
| `animated` | bool (default `false`) | Animate the stripes (implies `striped`). |
| `sections` | A JSON array of `{value, color, striped?, animated?}` objects | Multi-segment bar. Each object is one colored segment; mutually exclusive with `value`. Invalid JSON degrades to a build-time HTML comment. |


## 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.


```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.



<br>

Source: Markdown

```aardvark
{% progress value=65 attr={'onclick': '''
const value = this.tagName;
console.log('attr demo value:', value);
alert(value);
'''} %}
```


Source: Python

```python
component('aardvark', 'progress', value=65, attr={'onclick': '''
const value = this.tagName;
console.log('attr demo value:', value);
alert(value);
'''})
```