- Lightest
- Light
- Dark
- Darkest
- Medium
- Large
- LTR
- RTL
Meter
| Component status | Contribution |
|---|---|
| Last released | Unreleased |
| Current version | @spectrum-css/progressbar@1.0.3-alpha.1 |
Usage notes
Meter is implemented using the Progress bar component. Refer to the Progress bar API docs for API details.
Variants
StandardContribution
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>