页面载入进度条

Microhu同学刚刚把这个东西搞上，其实我也很早就在ZWWoOoOo的付费主题中看到过了。不过一直自己的主题没地方放，二是懒得动手，所以一直没有捣鼓过。不久前在Dianso童鞋那里偷了现在顶部那东东，所以也算有个位置放进度条了，好吧，我也加上玩玩。

不过对于代码，Microhu童鞋很忙，还好Timothy同学已经整理出来了，所以我就是用了现成的。它的原理：在页头放置一个 loading 状态，然后页尾载入一段 JS 隐藏掉，即根据浏览器的载入顺序来实现的简易 Loading 状态条。请根据下面步骤来。

首先，确定你的主题已经引入 jQuery 框架(一定要放在页头 <head>标签内)，然后在header.php中任意位置插入如下jQuery 代码

<script type="text/javascript">
		$("#loading").show();
		$("#loading div").animate({width:"10%"});
</script>

其中的10%应该随载入顺序逐步增加，直到 footer.php

之后在<body>标签起始位置放置：

<div id="loading" style="display: none;"><div style="width: 0%; display: block;"></div></div>

最后在footer.php文件中插入下面的代码：

<script type="text/javascript">
$("#loading div").animate({width:"100%"},function(){
setTimeout(function(){$("#loading").hide();},1000);
}); 
</script>

还有CSS文件，请参考下面代码自行加工：

#loading {
    height: 4px;
    left: 0;
    position: absolute;
    top: 0px;
    width: 100%;
    z-index: 99999;
}
 
#loading div{
	display:none;
	height:4px;
	background:#4171b8;
}

搞定收工，刷新查看效果吧！