Progress
Linear progress, determinate from aria-valuenow, or indeterminate without it.
Determinate
Uploading report.pdf64%
<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
<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>Installation
Everything ships in one stylesheet and one small script. There is nothing to import per component.
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
<script src="https://mian.ro/dist/mian.js" defer></script>Prefer to own the files? /r/progress.json is a registry item with this component's CSS and example markup, ready to copy into your project with any tool that reads the open registry-item format.
Class reference
| Class / attribute | Description |
|---|---|
| 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.