jQuery简单斑马线样式loading进度条动画特效

这是一款非常简单实用的jQuery斑马线样式loading进度条动画特效。该进度条特效通过简单的jQuery代码就完成了可控制的进度条动画特效。斑马线效果使用CSS3来完成，对不支持CSS3的浏览器可使用图片来替代。

在执行某些任务和表单提交时，使用进度条来提示用户当前的任务进度是非常好的用户体验。其它的一些js库和jQuery UI都提供了进度条组件。但是这个jQuery进度条特效的核心代码只有4行代码。非常简单易懂。

HTML结构

该斑马线进度条特效的HTML结构使用两个<div>。在一个包裹<div>中嵌套一个空的<div>。包裹<div>是进度条的容器，你可以将它定位在页面的任何地方。里面空的<div>是进度条的斑马线指示条。

<div id="progressBar"><div></div></div>                
              

CSS样式

下面是该斑马线进度条特效的基本CSS样式：

#progressBar {
    width: 400px;
    height: 22px;
    border: 1px solid #111;
    background-color: #292929;
}
#progressBar div {
    height: 100%;
    color: #fff;
    text-align: right;
    line-height: 22px; /* 如果需要文本居中，设置为和#progressBar的高度一样 */
    width: 0;
    background-color: #0099ff;
}                
              

JAVASCRIPT

接下来是该斑马线进度条特效的4行核心代码，它接收两个参数：

function progress(percent, $element) {
  var progressBarWidth = percent * $element.width() / 100;
  $element.find(‘div’).animate({ width: progressBarWidth }, 500).html(percent + "% ");
}                
              

第一个参数是进度条当前的百分比数，第二个参数是进度条的jQuery选择器。如果我们想设置当前的进度为80%，可以这样调用代码：

progress(80, $(‘#progressBar’));                
              

下载文件中有两个demo，第一个demo的斑马线动画使用CSS3来制作，第二个demo中的斑马线动画是GIF图片。