SVG Gauge

Minimalistic, zero dependency animated gauge widget

All the guages are styled via CSS. See gauge-test.css for styling for each of these gauges below.


  <!-- Unstyled gauge (All defaults) -->
  <div id="gauge0" class="gauge-container"></div>


  var gauge0 = Gauge(document.getElementById("gauge0"));

        
  <div id="gauge1" class="gauge-container"></div>

  var gauge1 = Gauge(
    document.getElementById("gauge1"),
    {
      max: 100,
      dialStartAngle: -90,
      dialEndAngle: -90.001,
      value: 100,
      label: function(value) {
        return Math.round(value) + "/" + this.max;
      }
    }
  );

        

  <div id="gauge2" class="gauge-container two"></div>


  var gauge2 = Gauge(
    document.getElementById("gauge2"),
    {
      max: 100,
      dialStartAngle: 180,
      dialEndAngle: 0,
      value: 50
    }
  );

        

  <div id="gauge3" class="gauge-container three"></div>


  var gauge3 = Gauge(
    document.getElementById("gauge3"),
    {
      max: 100,
      value: 50
    }
  );


  <div id="gauge4" class="gauge-container four"></div>


  var gauge4 = Gauge(
    document.getElementById("gauge4"),
    {
      max: 100,
      dialStartAngle: 180,
      dialEndAngle: -90,
      value: 50
    }
  );


  <div id="gauge5" class="gauge-container five"></div>


  var gauge5 = Gauge(
    document.getElementById("gauge5"),
    {
      max: 200,
      dialStartAngle: 0,
      dialEndAngle: -180,
      value: 50
    }
  );

        

  <div id="gauge6" class="gauge-container six"></div>


  var gauge6 = Gauge(
    document.getElementById("gauge6"),
    {
      max: 100,
      dialStartAngle: 90.01,
      dialEndAngle: 89.99,
      radius: 150,
      displayValue: false,
      value: 50,
    }
  );