自创插件简单易用的自创进度条插件
之前Rel_soul同学发了一个进度条生成的代码演示:
http://www.gbtags.com/gb/rtreplayerpreview/1138.htm
感觉很赞~有了这些工具,生成进度条就容易很多,老板再也不担心生成进度条费事了~
不过这几个链接好归好,可是有几个小缺点:
1.这个进度条,因为是从网络上拿的svg,所以造成了必须联网的情况下才能使用。对于我这种在外包公司里混的人,很容易碰到那种完全局域网的情况,所以这个就没办法用。
2. 这个进度条是更换图片,所以没有动画效果…
恩,所以我就根据soul发的链接,自己研究了一下,做了一个jquery插件,完全本地环境,并且支持动画。如果做的不好还请见谅~
代码github地址:
https://github.com/clarkfbar/jquery.progress
参数支持
var settings = {
width: 90, // 进度条宽度
height: 20, // 进度条高度
percent: 0, // 当前占比
backgroundColor: '#555', // 进度条背景颜色
barColor: '#d9534f', // 进度条颜色
radius: 4, // 边角圆度
fontSize: 12, // 字体大小
increaseTime: 1000.00/60.00, // 每一次调整进度条的时间, 默认最佳时间(可以调大,不要调小);只有在animate为true的情况下有效
increaseSpeed: 1, // 每次调整,增长速度;只有在animate为true的情况下有效
animate: true // 调整的时候,是否使用动画增长,默认为true
};
我提供了一个动画的开关,因为当上传文件小的时候,animate的动画方法是完全没有必要的~
初始化插件:
1.引入插件和jquery
2. 在页面要放入进度条的地方,放如一个svg:
<svg id="svg"></svg>
3. 调用插件:
var progress = $("#svg").Progress({
percent: 20,
width: 180,
height: 40,
fontSize: 16
});
4. 如果要修改进度
progress.percent(90); // 修改进度条占比,并返回当前值。如果参数为空,返回当前值
有动画效果:(初始化4秒后从10%升到90%)
(具体效果请前往原文查看)
无动画效果:(初始化4秒后从20%升到90%)
(具体效果请前往原文查看)
把玩代码:
http://www.gbtags.com/gb/rtreplayerpreview/1225.htm
点击阅读原文,学习更多干货。