• Lightest
  • Light
  • Dark
  • Darkest
  • Medium
  • Large
  • LTR
  • RTL

Meter

Component status
Contribution
Last releasedOctober 20, 2020
Current version@spectrum-css/progressbar@1.0.0-beta.2

Usage notes


Meter is implemented using the ProgressBar component.

Variants


Standard
Contribution

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