基于SVG的轻量级js圆形进度条插件

查看演示立即下载

插件描述：基于SVG的轻量级js圆形进度条插件

使用该圆形进度条需要引入circles.js（或circles.min.js）文件。

1	`<script` `src="js/circles.min.js"></script>`

HTML结构

该圆形进度条的HTML结构使用一个空的<div>即可。

1	`<div` `class="circle"` `id="circles-1"></div>`

初始化插件

在页面DOM元素加载完毕之后，可以通过下面的方法来初始化该圆形进度条插件。id参数必须和容器中的id相同。

var myCircle = Circles.create({
  id:                  'circles-1',
  radius:              60,
  value:               43,
  maxValue:            100,
  width:               10,
  text:                function(value){return value + '%';},
  colors:              ['#D3B6C6', '#4B253A'],
  duration:            400,
  wrpClass:            'circles-wrp',
  textClass:           'circles-text',
  valueStrokeClass:    'circles-valueStroke',
  maxValueStrokeClass: 'circles-maxValueStroke',
  styleWrapper:        true,
  styleText:           true
});

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效： jquery时间选择
下一个特效： jQuery进度条插件jqbar