Circles from lugolabs is a cool plugin if you are looking to create stylish donut circles or circles with animations. Its configuration is pretty simple where you can specify circle width, radius ,custom class you can apply for text and the circle itself. I got a chance to use myself and in no time I was able to use this nice features.
It uses svg and also light library.
Configuration of Circles
Git link
It uses svg and also light library.
Configuration of Circles
var myCircle = Circles.create({
id: 'circles-1', // Id for which you apply
radius: 60,
value: 43,// Value shown at center
maxValue: 100,
width: 10,
text: function(value){return value + '%';},// Customizing text shwon
colors: ['#D3B6C6', '#4B253A'],
duration: 400, // Animation Duration
wrpClass: 'circles-wrp',// Class which wraps circle
textClass: 'circles-text'// Class which wraps text
styleWrapper: true,
styleText: true
});
Git link
No comments:
Post a Comment