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>

inancakduvan/animated-circular-meter