【自创插件】简单易用的自创进度条插件

• 在线演示1
•  
• 本地下载
 

 

 

 

之前Rel_soul同学发了一个进度条生成的代码演示：http://www.gbtags.com/gb/rtreplayerpreview/1138.htm，感觉很赞~有了这些工具，生成进度条就容易很多，老板再也不担心生成进度条费事了~

不过这几个链接好归好，可是有几个小缺点（或许对某些人来说不算缺点）：

1. 这个进度条，因为是从网络上拿的svg，所以造成了必须联网的情况下才能使用。对于我这种在外包公司里混的人，很容易碰到那种完全局域网的情况，所以这个就没办法用。

2. 这个进度条是更换图片，所以没有动画效果…

恩，所以我就根据soul发的链接，自己研究了一下，做了一个jquery插件，完全本地环境，并且支持动画。如果做的不好还请见谅~

1. 代码github地址：https://github.com/clarkfbar/jquery.progress

 

参数支持

1. var settings ={
2. width:90,// 进度条宽度
3. height:20,// 进度条高度
4. percent:0,// 当前占比
5. backgroundColor:'#555',// 进度条背景颜色
6. barColor:'#d9534f',// 进度条颜色
7. radius:4,// 边角圆度
8. fontSize:12,// 字体大小
9. increaseTime:1000.00/60.00,// 每一次调整进度条的时间, 默认最佳时间(可以调大，不要调小)；只有在animate为true的情况下有效
10. increaseSpeed:1,// 每次调整，增长速度；只有在animate为true的情况下有效
11. animate:true// 调整的时候，是否使用动画增长，默认为true
12. };

 我提供了一个动画的开关，因为当上传文件小的时候，animate的动画方法是完全没有必要的~

初始化插件：

1. 引入插件和jquery

2. 在页面要放入进度条的地方，放如一个svg：

1. <svgid="svg"></svg>

3. 调用插件：

1. var progress = $("#svg").Progress({
2. percent:20,
3. width:180,
4. height:40,
5. fontSize:16
6. });

 4. 如果要修改进度

1. progress.percent(90);// 修改进度条占比，并返回当前值。如果参数为空，返回当前值

 

废话不说，看效果：

有动画效果：(初始化4秒后从10%升到90%)

<iframe style="background-color: transparent; border-width: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; width: 788px; height: 350px;" src="http://www.gbtags.com/gb/rtreplayerpreview-standalone/1212.htm"></iframe>

 无动画效果：(初始化4秒后从20%升到90%)

<iframe style="background-color: transparent; border-width: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; width: 788px; height: 350px;" src="http://www.gbtags.com/gb/rtreplayerpreview-standalone/1213.htm"></iframe>

把玩代码：http://www.gbtags.com/gb/rtreplayerpreview/1214.htm

 PS：我厚颜无耻的在上面加了MIT的licence，所以你们随便用，随便改。如果觉得好，自己项目里面用到，如果能把我的名字留在上面就感谢啦~哈哈~小小虚荣心~~~~

原文链接：http://www.gbtags.com/gb/share/5928.htm