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

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