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

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

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

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

/*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)) );

}

网页加载的时候动画的进度效果展示条---www.dodobook.net

展示页面: http://www.dodobook.net/demo/web_loading/

网页代码:http://www.dodobook.net/jquery/1865

$(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

var img = new Image();

img.οnlοad=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)

})

}

}

},

}

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