animated-circular-meter

Draw easily circular meter.

Animated circular meter is a very small-size library which you can initialize with one function easily and show your value on a circular meter!

Demo: https://inancakduvan.github.io/animated-circular-meter/

How to use

import Animated Circular Meter at end of your body tag.

  <script src='path/animated-circular-meter.min.js'></script>

Configuration

Type Default
value number -
max number 100
color string #ff0
background string #ebebeb
stroke_width number 3.5
padding number 0
radius boolean false
text object -

Initialize

  <script>
var meter = new AnimatedCircularMeter(id, config, callback);

meter.draw();

</script>

Example

HTML

  <div id="meter"></div>

JS

  <script>
var meter = new AnimatedCircularMeter("meter", {
max: 200,
value: 160,
color: "#D78AB1",
background: "#d9d9d9",
stroke_width: 3,
padding: 1,
radius: true,
text: {
    show: true,
    color: "#E5507A",
    font_size: "30px"
}
}, function(value) {
    console.log(value)
});

meter.draw();

</script>

Done!!