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
:圆形进度条的边框的透明度。
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!