Current version: 1.9.8Components

Meters

Variables

Variable property value desc.
$meter-height height r(1) meter height
$meter-radius size $meter-height / 2 meter border-radius
$small-meter-height height 2px small meter height
$small-meter-radius size 0 small meter border-radius
$large-meter-height height r(3) large meter height
$large-meter-radius size $large-meter-height / 2 large meter border-radius
$meter-base-bg background-color $porcelain meter background-color
$meter-bar-bg background-color $boston-blue meter bar background-color
$meter-info-status-bar-bg background-color $info meter bar background-color at info-status
$meter-info-status-selector selector [data-threshold="75"] meter bar selector at info-status
$meter-error-status-bar-bg background-color $error meter bar background-color at error-status
$meter-error-status-selector selector [data-threshold="99"] meter bar selector at error-status

Example

<div class="Meter">
  <div class="Meter-bar" style="width:50%;"></div>
</div>

Sizes

<div class="Meter Meter--s u-mgb--m" data-threshold="25">
  <div class="Meter-bar Meter-bar--s" style="width: 25%;"></div>
</div>

<div class="Meter Meter--s u-mgb--m" data-threshold="75">
  <div class="Meter-bar Meter-bar--s" style="width:75%;"></div>
</div>

<div class="Meter Meter--s" data-threshold="99">
  <div class="Meter-bar Meter-bar--s" style="width:99%;"></div>
</div>
<div class="Meter Meter--l u-mgb--m" data-threshold="25">
  <div class="Meter-bar Meter-bar--l" style="width:25%;"></div>
</div>

<div class="Meter Meter--l u-mgb--m" data-threshold="75">
  <div class="Meter-bar Meter-bar--l" style="width:75%;"></div>
</div>

<div class="Meter Meter--l" data-threshold="99">
  <div class="Meter-bar Meter-bar--l" style="width:99%;"></div>
</div>

Colors

<div class="Meter u-mgb--m" data-threshold="75">
  <div class="Meter-bar" style="width:75%;"></div>
</div>

<div class="Meter" data-threshold="99">
  <div class="Meter-bar" style="width:99%;"></div>
</div>