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

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

使用方法

使用该圆形进度条需要引入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
});               
              

配置参数

该圆形进度条的可用配置参数如下：

• id：包裹圆形进度条的DOM元素的ID。
• radius：圆形进度条的半径。
• value：圆形进度条的初始值，默认值为0。
• maxValue：圆形进度条的最大值，默认值为100。
• width：圆环的宽度，如果没有指定，值为10。
• colors：一个颜色数组，第一个颜色是整个圆环的颜色，如果没有指定，值为['#EEE', '#F00']。也可以是rgba()值，例如['rgba(255,255,255,0.25)', 'rgba(125,125,125,0.5)']。
• duration：动画的持续时间，默认为500.如果传入0或null，就不会有动画效果。
• wrpClass：包裹整个圆形进度条的元素的class名称。
• textClass：圆形进度条中文本的class名称。
• valueStrokeClass：用于value值的SVG path元素的class名称。
• maxValueStrokeClass：用于maxValue值的SVG path元素的class名称。
• styleWrapper：是否在包裹元素上添加行内(inline)样式，默认值为true。
• styleText：是否在文本元素上添加行内(inline)样式，默认值为true。
• text：圆形简单中间显示的文本。不设置文本可以设置为null。它也可以是一个函数，函数的返回值将显示在圆形进度条的中间，例如：

  // Example 1
  function(currentValue) {
    return '$'+currentValue;
  }
  // Example 2
  function() {
    return this.getPercent() + '%';
  }  
  

API

myCircle.updateRadius(Number radius)
              

通过给定的radius更新圆形进度条，例如制作响应式的圆形进度条。

myCircle.updateWidth(Number width)
              

通过给定的width更新圆形进度条。

myCircle.updateColors(Array colors)
              

更新圆形进度条的颜色。

myCircle.update(Number value [, Number duration])
              

为圆形进度条设置值。动画将使用duration毫秒来执行。如果duration没有指定，在构造函数中设置的duration值将被使用。如果不需要duration值，设置为0。

myCircle.update(Boolean force)
              

如果force设置为true，则强制重绘圆形进度条。

myCircle.getPercent()
              

返回基于当前值和最大值的圆形进度条的百分比值。

myCircle.getValue()
              

返回圆形进度条的值。

myCircle.getMaxValue()
              

返回圆形进度条的最大值。

myCircle.getValueFromPercent(Number percentage)
              

返回基于percentage和最大值的圆形进度条的百分比值。

myCircle.htmlifyNumber(Number number[, integerPartClass, decimalPartClass])
              

Returned HTML representation of given number with given classes names applied on tags。

CSS样式

圆形进度条的样式被指定为内联模式，你可以通过下面的CSS class类来覆盖要设置的样式。

• circles-wrp：包裹整个圆形进度条的元素的class类。
• circles-text：包裹文本的容器的class类。
• circles-integer：包裹在原点符号之前的文本的容器的class类。
• circles-decimals：包裹小数部分文本的容器的class类。

浏览器兼容

桌面设备浏览器：

• Firefox 3+
• Chrome 4+
• Safari 3.2+
• Opera 9+
• IE9 +

移动设备浏览器：

• iOS Safari 3.2+
• Android Browser 3+
• Opera Mobile 10+
• Chrome for Android 18+
• Firefox for Android 15+

circles圆形进度条插件的github地址为：https://github.com/lugolabs/circles