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

大家好，欢迎来到IT知识分享网。

之前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

点击阅读原文，学习更多干货。