Info @ meCoffee bf607b6707 First commit 6 gadi atpakaļ
..
dist bf607b6707 First commit 6 gadi atpakaļ
example bf607b6707 First commit 6 gadi atpakaļ
src bf607b6707 First commit 6 gadi atpakaļ
.npmignore bf607b6707 First commit 6 gadi atpakaļ
Gulpfile.js bf607b6707 First commit 6 gadi atpakaļ
LICENSE bf607b6707 First commit 6 gadi atpakaļ
README.md bf607b6707 First commit 6 gadi atpakaļ
index.js bf607b6707 First commit 6 gadi atpakaļ
index.js.bkp bf607b6707 First commit 6 gadi atpakaļ
package.json bf607b6707 First commit 6 gadi atpakaļ

README.md

SVG Gauge

Minmalistic, configurable, animated SVG gauge. Zero dependencies

Usage

HTML

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

CSS

.gauge-container {
  width: 150px;
  height: 150px;
  display: block;
  padding: 10px;
}
.gauge-container > .gauge > .dial {
  stroke: #eee;
  stroke-width: 20;
  fill: rgba(0,0,0,0);
}
.gauge-container > .gauge > .value {
  stroke: rgb(47, 227, 255);
  stroke-width: 20;
  fill: rgba(0,0,0,0);
}
.gauge-container > .gauge > .value-text {
  fill: rgb(47, 227, 255);
  font-family: sans-serif;
  font-weight: bold;
  font-size: 10em;
}

Javascript

// npm install
npm install svg-gauge

// Require JS
var Gauge = require("svg-guage");

// Standalone
var Gauge = window.Gauge;

// Create a new Gauge
var cpuGauge = Gauge(document.getElementById("cpuSpeed"), {
    max: 100,
    // custom label renderer
    label: function(value) {
      return Math.round(value) + "/" + this.max;
    },
    value: 50,
});

// Set gauge value
cpuGauge.setValue(75);

// Set value and animate (value, animation duration in seconds)
cpuGauge.setValueAnimated(90, 1);

Options

Name Description
dialStartAngle The angle in degrees to start the dial (135)
dialEndAngle The angle in degrees to end the dial. This MUST be less than dialStartAngle (45)
radius The radius of the gauge (400)
max The maximum value for the gauge (100)
label Optional function that returns a string label that will be rendered in the center. This function will be passed the current value
showValue Whether to show the value at the center of the gauge (true)
gaugeClass The CSS class of the gauge (gauge)
dialClass The CSS class of the gauge's dial (dial)
valueDialClass The CSS class of the gauge's fill (value dial) (value)
valueTextClass The CSS class of the gauge's text (value-text)

Live Demo