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

 查看演示  website  立即下载

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

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

HTML结构

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

<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
});

PREVIOUS:
NEXT:
jQuery进度条插件jqbar
jquery时间选择