Speedometer
Home
Snippets
Speedometer
HTML
CSS
JS
<script src="https://bernii.github.io/gauge.js/dist/gauge.min.js"></script> <div> <canvas id="foo"></canvas> <div class="zero">0</div> <div class="twohundred">200</div> <div class="wrap"> <button onclick="chamar()">Try</button> <input type="text" id="campo">Insert a number 0 ~ 200 </div> </div>
* { margin: 0; padding: 0; } #foo { height: 200px; width: 400px; } .wrap { position: absolute; top: 210px; left: 50px; } .zero { position: absolute; top: 165px; left: 80px; } .twohundred { position: absolute; top: 165px; left: 280px; }
var opts = { lines: 12, angle: 0.00, lineWidth: 0.44, pointer: { length: 0.5, strokeWidth: 0.035, color: 'red' }, limitMax: false, colorStart: 'blue', colorStop: '#8FC0DA', strokeColor: '#E0E0E0', generateGradient: true }; var target = document.getElementById('foo'); var gauge = new Gauge(target).setOptions(opts); gauge.maxValue = 200; gauge.animationSpeed = 32; function chamar(valor) { valor = document.getElementById("campo").value; gauge.set(valor); }
Ad #1
Ad #2
Scroll to Top