svg圆形进度条插件svg-gauge A jQuery plugin designed to provide gallery view for images

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"),
    {
      min: -100,
      max: 100,
      dialStartAngle: 180,
      dialEndAngle: 0,
      value: 50,
      viewBox: "0 0 100 57",
      color: function(value) {
        if(value < 20) {
          return "#5ee432";
        }else if(value < 40) {
          return "#fffa50";
        }else if(value < 60) {
          return "#f7aa38";
        }else {
          return "#ef4655";
        }
      }
    }
  );


  <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,
      viewBox: "0 0 57 57",
      value: 50
    }
  );


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


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


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


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