进度条

今天给大家带来一个比较炫的进度条，进度条在一耗时操作上给用户一个比较好的体验，不会让用户觉得在盲目等待，对于没有进度条的长时间等待，用户会任务死机了，毫不犹豫的关掉应用；一般用于下载任务，删除大量任务，网页加载等；如果有使用HTML5为手机布局的，也可以用于手机中~

效果图：

1、html结构：

[html] view plain copy

1. <div id="loadBar01" class="loadBar">  
2.        <div>  
3.             <span class="percent">  
4.                <i></i>  
5.             </span>  
6.        </div>  
7.        <span class="percentNum">0%</span>  
8.    </div>  

简单分析下：
div.loadBar代表整个进度条

div.loadBar div 设置了圆角表框 ，div.loadBar div  span 为进度 (动态改变宽度)，  div.loadBar div  span i 为进度填充背景色（即width=100%）

HTML的结构，大家可以自己设计，只要合理，都没有问题~

2、CSS：

[css] view plain copy

1. body  
2.        {  
3.            font-family: Thoma, Microsoft YaHei, 'Lato', Calibri, Arial, sans-serif;  
4.        }  
5.   
6.        #content  
7.        {  
8.            margin: 120px auto;  
9.            width: 80%;  
10.        }  
11.   
12.        .loadBar  
13.        {  
14.            width: 600px;  
15.            height: 30px;  
16.            border: 3px solid #212121;  
17.            border-radius: 20px;  
18.            position: relative;  
19.        }  
20.   
21.        .loadBar div  
22.        {  
23.            width: 100%;  
24.            height: 100%;  
25.            position: absolute;  
26.            top: 0;  
27.            left: 0;  
28.        }  
29.   
30.        .loadBar div span, .loadBar div i  
31.        {  
32.            box-shadow: inset 0 -2px 6px rgba(0, 0, 0, .4);  
33.            width: 0%;  
34.            display: block;  
35.            height: 100%;  
36.            position: absolute;  
37.            top: 0;  
38.            left: 0;  
39.            border-radius: 20px;  
40.        }  
41.   
42.        .loadBar div i  
43.        {  
44.            width: 100%;  
45.            -webkit-animation: move .8s linear infinite;  
46.            background: -webkit-linear-gradient(left top, #7ed047 0%, #7ed047 25%, #4ea018 25%, #4ea018 50%, #7ed047 50%, #7ed047 75%, #4ea018 75%, #4ea018 100%);  
47.            background-size: 40px 40px;  
48.        }  
49.   
50.        .loadBar .percentNum  
51.        {  
52.            position: absolute;  
53.            top: 100%;  
54.            right: 10%;  
55.            padding: 1px 15px;  
56.            border-bottom-left-radius: 16px;  
57.            border-bottom-right-radius: 16px;  
58.            border: 1px solid #222;  
59.            background-color: #222;  
60.            color: #fff;  
61.   
62.        }  
63.   
64.        @-webkit-keyframes move  
65.        {  
66.            0%  
67.            {  
68.                background-position: 0 0;  
69.            }  
70.            100%  
71.            {  
72.                background-position: 40px 0;  
73.            }  
74.        }  

此时效果为：

整体布局就是利用position relative和absolute~

比较难的地方就是，渐变条的实现：

我们采用

a、从左上到右下的渐变

b、颜色分别为：0-25% 为#7ed047 ， 25%-50% 为#4ea018 ， 50%-75%为#7ed047 ， 75%-100%为#4ea018

c、背景的大小为40px 40px 这个设置超过高度就行， 越大，条文宽度越宽 

分析图：

设置的原理就是上图了，同时可以背景宽度设置越大，条文宽度越大；

3、设置js，创建LoadBar对象

[javascript] view plain copy

1. function LoadingBar(id)  
2.        {  
3.            this.loadbar = $("#" + id);  
4.            this.percentEle = $(".percent", this.loadbar);  
5.            this.percentNumEle = $(".percentNum", this.loadbar);  
6.            this.max = 100;  
7.            this.currentProgress = 0;  
8.        }  
9.        LoadingBar.prototype = {  
10.            constructor: LoadingBar,  
11.            setMax: function (maxVal)  
12.            {  
13.                this.max = maxVal;  
14.            },  
15.            setProgress: function (val)  
16.            {  
17.                if (val >= this.max)  
18.                {  
19.                    val = this.max;  
20.                }  
21.                this.currentProgress = parseInt((val / this.max) * 100) + "%";  
22.                this.percentEle.width(this.currentProgress);  
23.                this.percentNumEle.text(this.currentProgress);  
24.   
25.   
26.            }  
27.        };  

我们创建了一个LoadBar对象，同时公开了两个方法，一个设置最大进度，一个设置当前进度；比如下载文件最大进度为文件大小，当前进度为已下载文件大小。

4、测试

最后我们测试下我们的代码：

[javascript] view plain copy

1. $(function ()  
2.      {  
3.   
4.          var loadbar = new LoadingBar("loadBar01");  
5.          var max = 1000;  
6.          loadbar.setMax(max);  
7.          var i = 0;  
8.          var time = setInterval(function ()  
9.          {  
10.              loadbar.setProgress(i);  
11.              if (i == max)  
12.              {  
13.                  clearInterval(time);  
14.                  return;  
15.              }  
16.              i += 10;  
17.          }, 40);  
18.      });  

ps:对于js对象的设计，尽可能的考虑实用性~