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

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

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

tx001004.png

在线演示 下载

使用方法

使用这个圆形进度条插件首先要引入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 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:圆形进度条的边框的透明度。
相关文章
|
15天前
|
JavaScript 前端开发 容器
jQuery多功能滑块插件r-slider.js
r-slider.js是一款jQuery多功能滑块插件。使用该插件,可以制作出滑块、开关按钮、进度条、向导步骤等多种效果。
28 5
|
16天前
|
移动开发 JavaScript 前端开发
基于canvas的jQuery图片剪裁插件
imageResizer是一款基于canvas的jQuery图片剪裁插件。它使用简单,可以基于HTML5 canvas实现图片的平移和剪裁。
|
移动开发 JavaScript HTML5
jQuery工具提示插件tooltip.js 使用教程
jQuery工具提示插件tooltip.js 使用教程
|
JavaScript
jQuery焦点图插件
在线演示 本地下载
810 0
|
JSON JavaScript 前端开发
jQuery幻灯片插件Owl Carousel插件
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/w178191520/article/details/84179419 ...
1144 0
|
JSON JavaScript 前端开发
|
前端开发 JavaScript
|
JavaScript 前端开发 Android开发