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.

<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,
    }
  );