Open navigation menu

Meter Gauge for Measurements

Creates visual gauge indicators using the meter element with color-coded thresholds for displaying system metrics and measurement ranges.

HtmlData Fetching

Code

snippet
<!-- CPU usage gauge -->
<div class="metric">
  <label for="cpu">CPU Usage</label>
  <meter id="cpu"
         value="0.72"
         min="0"
         max="1"
         low="0.6"
         high="0.85"
         optimum="0.3">
    72%
  </meter>
  <span class="value">72%</span>
</div>

<!-- Memory usage -->
<div class="metric">
  <label for="memory">Memory</label>
  <meter id="memory"
         value="8.2"
         min="0"
         max="16"
         low="10"
         high="14"
         optimum="4">
    8.2 GB
  </meter>
  <span class="value">8.2 / 16 GB</span>
</div>

<!-- Temperature -->
<div class="metric">
  <label for="temp">Temperature</label>
  <meter id="temp"
         value="38"
         min="-10"
         max="50"
         low="30"
         high="40"
         optimum="20">
    38&deg;C
  </meter>
  <span class="value">38&deg;C</span>
</div>

<style>
  .metric {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.5rem 0;
  }
  meter {
    width: 200px;
    height: 12px;
  }
  meter::-webkit-meter-bar {
    background: #e0e0e0;
    border-radius: 6px;
  }
  meter::-webkit-meter-optimum-value {
    background: #4CAF50;
    border-radius: 6px;
  }
  meter::-webkit-meter-suboptimum-value {
    background: #FF9800;
    border-radius: 6px;
  }
  meter::-webkit-meter-even-less-good-value {
    background: #F44336;
    border-radius: 6px;
  }
</style>

Related Examples