Meter

Component status
Contribution
Last releasedOctober 8, 2019
Current version@spectrum-css/barloader@2.0.0

Usage notes#


Meter is implemented using the BarLoader component.

Variants#


Standard#
Contribution

Storage Space
50%
Storage Space
80%
Storage Space
90%
<div style="margin: 20px 0;">
  <div class="spectrum-BarLoader is-positive" value="50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
    <div class="spectrum-BarLoader-label">Storage Space</div>
    <div class="spectrum-BarLoader-percentage">50%</div>
    <div class="spectrum-BarLoader-track">
      <div class="spectrum-BarLoader-fill" style="width: 50%;"></div>
    </div>
  </div>
</div>
<div style="margin: 20px 0;">
  <div class="spectrum-BarLoader is-warning" value="80" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
    <div class="spectrum-BarLoader-label">Storage Space</div>
    <div class="spectrum-BarLoader-percentage">80%</div>
    <div class="spectrum-BarLoader-track">
      <div class="spectrum-BarLoader-fill" style="width: 80%;"></div>
    </div>
  </div>
</div>
<div style="margin: 20px 0;">
  <div class="spectrum-BarLoader is-critical" value="90" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">
    <div class="spectrum-BarLoader-label">Storage Space</div>
    <div class="spectrum-BarLoader-percentage">90%</div>
    <div class="spectrum-BarLoader-track">
      <div class="spectrum-BarLoader-fill" style="width: 90%;"></div>
    </div>
  </div>
</div>
Show markup