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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！