Usage meter
Plan usage against limits, seats, storage, API calls, with warning and over-limit states.
Plan usage
Team plan
Resets on 1 October
Seats7 of 10
Storage8.4 of 10 GB
84% used, consider archiving old files.
API calls104,210 of 100,000
Over the limit since 22 September. Extra calls are billed at €0.40 per 1,000.
<div class="mn-card" style="max-width:26rem"><div class="mn-card-header"><h3 class="mn-card-title">Team plan</h3><p class="mn-card-description">Resets on 1 October</p></div>
<div class="mn-card-body mn-meters">
<div class="mn-meter"><p class="mn-meter-head"><span>Seats</span><span>7 of 10</span></p><div class="mn-progress" role="meter" aria-label="Seats" aria-valuemin="0" aria-valuemax="10" aria-valuenow="7" style="--_v:70%"></div></div>
<div class="mn-meter"><p class="mn-meter-head"><span>Storage</span><span>8.4 of 10 GB</span></p><div class="mn-progress mn-warning" role="meter" aria-label="Storage" aria-valuemin="0" aria-valuemax="10" aria-valuenow="8.4" style="--_v:84%"></div><p class="mn-meter-note">84% used, consider archiving old files.</p></div>
<div class="mn-meter"><p class="mn-meter-head"><span>API calls</span><span>104,210 of 100,000</span></p><div class="mn-progress mn-danger" role="meter" aria-label="API calls" aria-valuemin="0" aria-valuemax="100000" aria-valuenow="104210" style="--_v:100%"></div><p class="mn-meter-note">Over the limit since 22 September. Extra calls are billed at €0.40 per 1,000.</p></div>
</div></div>Installation
Everything ships in one stylesheet. There is nothing to import per component.
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">Prefer to own the files? /r/usage-meter.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-meters | A stack of meters. |
| mn-meter | One meter: mn-meter-head (label and numbers), a progress bar, mn-meter-note. |
| mn-progress mn-warning · mn-danger | Colour the bar when near or over the limit; the note follows. |
Accessibility
- Give the bar role="meter" with aria-valuenow, aria-valuemin, aria-valuemax and aria-label.
- State the numbers in text (“8.4 GB of 10 GB”): the bar alone is not enough.