网页加载的时候动画的进度效果展示条

  •   
  • 4902
  • HTML
  • 7
  • super_dodo
  • 2015/01/05

仿极客学院的网页导航栏上方的的动画色彩进度条展示，看到效果很不错。特意仿照学习整理一下。代码和内容都极度的精简。各位学习者只用复制过去即可使用。不需要任何多余的图片或者js组件。不过引入jquery是在所难免的。

效果展示界面，请见网页的中部 展示页面请点击 http://www.dodobook.net/demo/web_loading/

直接上代码，各位copy后即可使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页加载的时候动画的进度效果展示条</title>
    <script type="text/javascript" src="http://www.dodobook.net/wp-content/themes/dodo/js/jquery.min.js"></script>
    <style type="text/css">
        /*reset*/
        body{margin: 0;padding: 0;}
        h2{font-family:"Microsoft Yahei";text-align:center;margin:40px;}
        /*loading*/
        #loading{width:100%;height:2px; overflow: hidden; background: #f3f3f3;}
        #loading .loading-length{width:0px;height:2px; overflow:hidden;
            background:#35b558;
            background:-webkit-gradient(linear ,10% 10%,100% 100%,
            color-stop(0.14,rgb(53,181,80)),
            color-stop(0.5,rgb(138,202,140)),
            color-stop(1,rgb(45,133,202)) );
        }
    </style>
</head>
<body>
    <h2 style="color:#35b558;">网页加载的时候动画的进度效果展示条---www.dodobook.net</h2>
     
    <!--loading-->
    <div id="loading">
        <div class="loading-length"></div>
    </div>
    <!--loading end-->
 
    <h2 style="color:#414141;">展示页面: http://www.dodobook.net/demo/web_loading/ </h2>
    <h2 style="color:#ff4700;">网页代码:<a href="http://www.dodobook.net/jquery/1865" target="_blank">http://www.dodobook.net/jquery/1865</a></h2>
 
    <script type="text/javascript">
        $(function(){
            webLoading.init();      //当网页加载的时候
        });
 
        //网页加载的时候的加载进度动画
        webLoading={
            init:function(){
                this.loading();
            },
 
            loading:function(){     //头部loadding
                var len = '20';     //执行20次动画,每次50毫秒合计一秒钟
                var num = '0';
                var le=$('.loading-length');
                for(var i=0; i<len; i++){
                    var img = new Image();
                    img.onload=function(){
                        num++;
                        le.animate({width:$(window).width() / len * num},50)
                    };
                    img.src= 'http://www.dodobook.net/demo/web_loading/loading.gif';    //随意一张图片都可以
                     
                    if(i==len-1){       //最后一次的时候,实现全屏幕的填充满
                        $(window).resize(function(){
                            var wlen = parseInt($(window).width());
                            $('.loading-length').width(wlen)
                        })
                    }
                }
            },
        }
    </script>
 
</body>
</html>

车尔尼雪夫斯基说，未来是光明而美丽的，爱她，向她突进，为她工作，迎接她，尽可能地使她成为现实吧！