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

Meter

Component status
Contribution
Last releasedFebruary 2, 2021
Current version@spectrum-css/progressbar@1.0.0

Usage notes


Meter is implemented using the Progress bar component. Refer to the Progress bar API docs for API details.

Variants


Standard
Contribution

Storage Space
50%
Storage Space
80%
Storage Space
90%
Show markup
<div style="margin: 20px 0;">
  <div class="spectrum-ProgressBar spectrum-ProgressBar--sizeM is-positive" value="50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
    <div class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-ProgressBar-label">Storage Space</div>
    <div class="spectrum-FieldLabel spectrum-FieldLabel--sizeM 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 spectrum-ProgressBar--sizeM is-notice" value="80" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
    <div class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-ProgressBar-label">Storage Space</div>
    <div class="spectrum-FieldLabel spectrum-FieldLabel--sizeM 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 spectrum-ProgressBar--sizeM is-negative" value="90" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">
    <div class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-ProgressBar-label">Storage Space</div>
    <div class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-ProgressBar-percentage">90%</div>
    <div class="spectrum-ProgressBar-track">
      <div class="spectrum-ProgressBar-fill" style="width: 90%;"></div>
    </div>
  </div>
</div>