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

Meter

Component status
Contribution
Current version@spectrum-css/progressbar@4.1.7
ReleasedSeptember 13, 2024
S2-foundations@spectrum-css/progressbar@5.0.0-s2-foundations.15
ReleasedSeptember 12, 2024
View guidelines
Spectrum website
View repository
GitHub
View package
npm

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