# Progress and meter

Source: https://iriscss.com/documentation/elements/progress-and-meter/

`progress` shows how far a task has got. `meter` shows a value in a known range.

## Progress

```html
<progress value="40" max="100">40%</progress>
```

## Indeterminate

Without a `value` the bar animates while the task runs. Users who prefer reduced motion see a still bar.

```html
<progress></progress>
```

## Colors

A [color class](https://iriscss.com/documentation/modifiers/colors/index.html.md) colors the bar.

```html
<progress class="secondary" value="20" max="100"></progress>
<progress class="info" value="40" max="100"></progress>
<progress class="warning" value="60" max="100"></progress>
<progress class="danger" value="80" max="100"></progress>
```

## Meter

The bar is green in the optimum range, yellow below it and red in the worst range. Set `low`, `high` and `optimum` to define the ranges.

```html
<label>Disk usage, low <meter value="0.3" low="0.6" high="0.8" optimum="0.2">30%</meter></label>
<label>Disk usage, high <meter value="0.7" low="0.6" high="0.8" optimum="0.2">70%</meter></label>
<label>Disk usage, full <meter value="0.95" low="0.6" high="0.8" optimum="0.2">95%</meter></label>
```

## Sizes and styles

Both take `.small`, `.medium` and `.large`, and `.rounded` or `.square`.

```html
<progress class="small rounded" value="50" max="100"></progress>
<progress class="large square" value="50" max="100"></progress>
<meter class="large rounded" value="0.5"></meter>
```

## Variables

| Variable | Default | Note |
| --- | --- | --- |
| `--i-progress-duration` | `1s` | One sweep of an indeterminate progress bar |
| `--i-progress-color-background` | `light-dark(#dfe3eb, #202632)` |  |
| `--i-progress-color-bar` | `var(--i-color-primary)` |  |
| `--i-meter-color-optimum` | `var(--i-color-success)` |  |
| `--i-meter-color-suboptimum` | `var(--i-color-warning)` |  |
| `--i-meter-color-poor` | `var(--i-color-danger)` |  |