Circles轻量级Js圆形进度条插件

介绍：
circles是一款基于HTML5 SVG的轻量级JavaScript圆形进度条插件。该圆形进度条具有响应式，可动画等特点，并且可以制作出圆形进度条进入视口才开始动画的效果。
只有一个JS文件

使用方法：
1.导入circles.js或circles.min.js文件
2.在HTML中创建一个占位符div：

3.利用js调用

Circles.create({
    id: 'circles-1',
    radius: 45,
    value: allcount,
    maxValue: allcount,
    width: 7,
    text: allcount,
    colors: ['#f1f1f1', '#FF9E27'],
    duration: 400,
    wrpClass: 'circles-wrp',
    textClass: 'circles-text',
    styleWrapper: true,
    styleText: true
});            

4.通过隐藏input来获取从后端传来的数据并且利用Circles绘图：
HTML：

//部分代码省略   
 

                                        

                                        
事件总数
                                    
   

JS代码：

   var allcount = $("input#allcountid").val();
 
Circles.create({
    id: 'circles-1',
    radius: 45,
    value: allcount,
    maxValue: allcount,
    width: 7,
    text: allcount,
    colors: ['#f1f1f1', '#FF9E27'],
    duration: 400,
    wrpClass: 'circles-wrp',
    textClass: 'circles-text',
    styleWrapper: true,
    styleText: true
});     

JS链接
链接