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

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

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

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

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

<!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>

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