Bar

Bars display progress or meter values using native HTML elements.

Usage

Use the .Bar wrapper around a <progress> or <meter> element. Add .Bar-Text for an inline label.

<div class="Bar">
  <progress value="60" max="100"></progress>
  <span class="Bar-Text">60%</span>
</div>

Use <meter> for known-range measurements (e.g. disk usage, scores):

<div class="Bar success">
  <meter value="0.7" min="0" max="1"></meter>
  <span class="Bar-Text">70%</span>
</div>

Variants

Apply a semantic color variant to the .Bar wrapper:

• success
• danger
• warning
• info
• accent

Example

Structure

• .Bar: Wrapper element that holds the meter/progress and optional text.
• .Bar-Text: Inline label displayed alongside the bar (e.g. percentage or value).