• Light
  • Dark
  • Darkest
  • Medium
  • Large
  • LTR
  • RTL
  • Default
  • Express

Meter

Component status
Contribution
Current version@spectrum-css/progressbar@4.1.2
ReleasedMay 22, 2024

Usage notes


Meter is implemented using the Progress bar component. Refer to the Progress bar API docs for API details.
Meter should be only used with S or L t-shirt sizes. The Meter table of options provides further details on which variants are available.

Previous size classname New size classname
.spectrum-ProgressBar--sizeS .spectrum-Meter--sizeS
.spectrum-ProgressBar--sizeL .spectrum-Meter--sizeL

Variants


Sizing
Contribution

Storage Space
50%

Storage Space
80%
Show markup
<div class="spectrum-Examples" style="flex-direction: column;">
  <div class="spectrum-Examples-item">
    <div class="spectrum-ProgressBar spectrum-Meter spectrum-Meter--sizeS is-positive" value="50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
      <div class="spectrum-FieldLabel spectrum-FieldLabel--sizeS spectrum-ProgressBar-label">Storage Space</div>
      <div class="spectrum-FieldLabel spectrum-FieldLabel--sizeS spectrum-ProgressBar-percentage">50%</div>
      <div class="spectrum-ProgressBar-track">
        <div class="spectrum-ProgressBar-fill" style="width: 50%;"></div>
      </div>
  </div>
</div>
</br>
<div class="spectrum-Examples-item"  style="margin-bottom: 20px;">
  <div class="spectrum-ProgressBar spectrum-Meter spectrum-Meter--sizeL is-notice" value="80" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
    <div class="spectrum-FieldLabel spectrum-FieldLabel--sizeL spectrum-ProgressBar-label">Storage Space</div>
    <div class="spectrum-FieldLabel spectrum-FieldLabel--sizeL spectrum-ProgressBar-percentage">80%</div>
    <div class="spectrum-ProgressBar-track">
      <div class="spectrum-ProgressBar-fill" style="width: 80%;"></div>
  </div>
</div>

Colors
Contribution

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

Neutral
Contribution

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

Notice
Contribution

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

Negative
Contribution

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

Custom Properties API


This component can be modified via its --mod-* prefixed custom properties. A list of those prefixed custom properties can be found here.

Migration Guide


spectrum-Meter class

Meter now uses the class spectrum-Meter on the parent div