Press "Enter" to skip to content

Create Responsive Gauge Meter Using Pure CSS | CSSGauge

Pure CSS Gauge Meter Component, no SVG, or artboard is used in this component. This component can be easily distinguished by overriding the default style rules and controlling it with CSS variables and HTML markup elements.

A CSS only gauge part to visualize numeric values in minimal clear gauge meters.

🔐 Password Strength Meter Based On zxcvbn In Vue.js

How to make use of it:

1. Download the package and load the gauge.min.css within the document.

<link rel="stylesheet" href="gauge.min.css" />

2. Create the HTML for the gauge.

<div class="gauge">
  <div class="ticks">
    <div class="tithe" style="--gauge-tithe-tick:1;"></div>
    <div class="tithe" style="--gauge-tithe-tick:2;"></div>
    <div class="tithe" style="--gauge-tithe-tick:3;"></div>
    <div class="tithe" style="--gauge-tithe-tick:4;"></div>
    <div class="tithe" style="--gauge-tithe-tick:6;"></div>
    <div class="tithe" style="--gauge-tithe-tick:7;"></div>
    <div class="tithe" style="--gauge-tithe-tick:8;"></div>
    <div class="tithe" style="--gauge-tithe-tick:9;"></div>
    <div class="min"></div>
    <div class="mid"></div>
    <div class="max"></div>
  </div>
  <div class="tick-circle"></div>
  <div class="needle">
    <div class="needle-head"></div>
  </div>
  <div class="labels">
    <div class="value-label"></div>
  </div>
</div>

3. Customize the gauge with the following CSS variables.

<div class="gauge" style="
     --gauge-bg: #088478;
     --gauge-value:0;
     --gauge-display-value:100;">
  <div class="ticks">
    <div class="tithe" style="--gauge-tithe-tick:1;"></div>
    <div class="tithe" style="--gauge-tithe-tick:2;"></div>
    <div class="tithe" style="--gauge-tithe-tick:3;"></div>
    <div class="tithe" style="--gauge-tithe-tick:4;"></div>
    <div class="tithe" style="--gauge-tithe-tick:6;"></div>
    <div class="tithe" style="--gauge-tithe-tick:7;"></div>
    <div class="tithe" style="--gauge-tithe-tick:8;"></div>
    <div class="tithe" style="--gauge-tithe-tick:9;"></div>
    <div class="min"></div>
    <div class="mid"></div>
    <div class="max"></div>
  </div>
  <div class="tick-circle"></div>
  <div class="needle">
    <div class="needle-head"></div>
  </div>
  <div class="labels">
    <div class="value-label"></div>
  </div>
</div>

HTML gauge meter code, Gauge chart html css, css gauge plugin/Github


See Demo And Download

Official Website(rotvalli): Click Here

This superior jQuery/javascript plugin is developed by rotvalli. For extra Advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.