jQuery简单实用的圆形进度条插件

CirclesProgressbar是一款简单实用的jQuery圆形进度条插件。该插件可以自定义圆形进度条的大小，填充颜色，边框颜色和是否带动画效果等。该圆形进度条插件在使用上非常简单。

使用方法

使用这个圆形进度条插件首先要引入jQuery和jquery.circles-progressbar.js文件。

<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="dist/jquery.circles-progressbar.js"></script>                
              

HTML结构

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

<div id="basic0"></div>            
              

初始化插件

在页面DOM元素加载完毕之后，最基本的调用该插件的方法如下：

$('#basic0').circlesProgress({'progress':'1','borderSize':'0'});             
              

这个调用设置圆形进度条的进度为1，边框宽度为0。你还可以在初始化时传入更多的参数。

optionsObject = {
    'size':150, // 150px width and height
    'progress': 50, // fillup in percent
    'innerColor': 'rgb(255,0,0)',
    'outerColor': '#00F',
    'borderSize': 4, // width of the border
}                
              

配置参数

• size：圆形进度条的尺寸。
• progress：圆形进度条的当前进度。
• borderSize：圆形进度条的边框宽度。
• innerColor：圆形进度条的填充颜色。
• outerColor：圆形进度条的边框颜色。
• initialProgress：圆形进度条初始化时的进度。
• innerOpacity：圆形进度条填充颜色的透明度。
• outerOpacity：圆形进度条的边框的透明度。