插件描述：这是一款基于HTML5 SVG的轻量级jQuery进度条插件。该进度条插件使用简单，它提供了一些基本的参数来控制进度条的外观和动画，是一款非常实用的进度条插件。
简要教程
这是一款基于HTML5 SVG的轻量级jQuery进度条插件。该进度条插件使用简单，它提供了一些基本的参数来控制进度条的外观和动画，是一款非常实用的进度条插件。
使用方法
使用该jQuery进度条插件需要引入jQuery和jquery.progress.js文件。
1 2 | <script src="js/jquery.min.js"></script> <script src="js/jquery.progress.js"></script> |
HTML结构
该jQuery进度条的HTML结构使用一个<svg>元素来制作。
1 | <svg id="container"></svg> |
初始化插件
在页面DOM元素加载完毕之后，可以通过下面的方法来初始化该进度条插件。
1 2 3 4 5 6 | var progress = $("#container").Progress({ percent: 20, width: 180, height: 40, fontSize: 16}); |
配置参数
该进度条插件的可用配置参数如下：
1 2 3 4 5 6 7 8 9 10 11 12 | var settings = { width: 90, // the width of bar height: 20, // the height of bar percent: 0, // the current percent backgroundColor: '#555', // the color of the background barColor: '#d9534f', // the color of the bar radius: 4, // the radius of the corner fontSize: 12, // the font size fontColor: '#fff', // the color of the number increaseSpeed: 1, // the increase length animate: true // whether to use animation}; |
width：进度条的宽度。
height：进度条的高度。
percent：进度条的当前百分比。
backgroundColor：进度条的背景色。
barColor：进度条的颜色。
radius：进度条圆角的半径。
fontSize：字体大小。
fontColor：字体颜色。
increaseSpeed：进度条增加的长度。
animate：是否动画。
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： jQuery日期时间选择插件DateTimePicker(中文版)
- 下一个特效： 仿智能电视应用APP滑动幻灯片jQuery插件