Tuesday, December 9, 2014

Circles.js

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
 
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