本帖最后由 大兵小虾 于 2015-10-29 16:08 编辑
这是一款基于HTML5 SVG的轻量级jQuery进度条插件。该进度条插件使用简单，它提供了一些基本的参数来控制进度条的外观和动画，是一款非常实用的进度条插件。
源码演示：
001.jpg (24.64 KB, 下载次数: 0)
下载附件
6 天前 上传
使用方法
使用该jQuery进度条插件需要引入jQuery和jquery.progress.js文件。
<script src="js/jquery.min.js"></script>
<script src="js/jquery.progress.js"></script>复制代码 HTML结构
该jQuery进度条的HTML结构使用一个<svg>元素来制作。
<svg id="container"></svg>复制代码 初始化插件
在页面DOM元素加载完毕之后，可以通过下面的方法来初始化该进度条插件。
var progress = $("#container").Progress({
percent: 20,
width: 180,
height: 40,
fontSize: 16
}); 复制代码 配置参数
该进度条插件的可用配置参数如下：
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：是否动画。
游客，如果您要查看本帖隐藏内容请回复
相关文章
精彩导读
热门资讯
关注我们
