# Progress · MIAN

Linear progress, determinate from aria-valuenow, or indeterminate without it.

- Id: `progress` · Category: Feedback · Needs mian.js: yes · License: MIAN License (free to use)
- Docs: https://mian.ro/components/progress
- Use for: progress bar, upload progress, loading bar, completion.

Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate.

## Install

```html
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
<script src="https://mian.ro/dist/mian.js" defer></script>
```

## Classes

- `mn-progress`: Bar. mian.js reads aria-valuenow/aria-valuemax and keeps it in sync.
- `mn-progress-sm · mn-progress-lg`: Sizes.
- `mn-progress-label`: Label row above the bar.

## Accessibility

- role="progressbar" with aria-valuenow, and an accessible name. Omit aria-valuenow for indeterminate.

## Examples

### Determinate

```html
<div style="max-width:26rem">
  <div class="mn-progress-label"><span id="up-l">Uploading report.pdf</span><span>64%</span></div>
  <div class="mn-progress" role="progressbar" aria-labelledby="up-l" aria-valuenow="64"></div>
</div>
```

### Colours, sizes, indeterminate

```html
<div class="mn-stack" style="max-width:26rem">
  <div class="mn-progress mn-progress-sm mn-success" role="progressbar" aria-label="Storage" aria-valuenow="30"></div>
  <div class="mn-progress mn-warning" role="progressbar" aria-label="Quota" aria-valuenow="78"></div>
  <div class="mn-progress mn-progress-lg mn-danger" role="progressbar" aria-label="Disk" aria-valuenow="95"></div>
  <div class="mn-progress" role="progressbar" aria-label="Loading"></div>
</div>
```

## Source

Already inside mian.css and mian.js; you do not need it to use the component. To vendor or customise: https://mian.ro/api/v1/components/progress/source