是不是有些主题的顶部，有一条漂亮的的加载条，是不是很羡慕，好的今天我们就来实现这个功能。
这个特效很明显是属于Jquery,注意，可别忘记加载jQuery.js呀~~
今天我给大家两种形式的加载条。
方法一，显示实际加载进度
在页面不同的位置放置不同JS脚本，这要目的是页面加载到哪里，网页加载条显示多少，等加载页面完后，进度条满后消失。
首先是创建一个DIV，一般是紧跟在< body >的后面，因为是最上面显示加载条，
<code><div id="loading" style="display: none;"><div style="width: 0%; display: block;"></div></div>
</code>
</code>
CSS样式
<code>#loading {
height: 8px;
left: 0;
position: absolute;
width: 100%;
z-index: 99999;
}</code>
height: 8px;
left: 0;
position: absolute;
width: 100%;
z-index: 99999;
}</code>
显示20%，这个一般在网站站名后面
<code><script type="text/javascript">
$("#loading").show();
$("#loading div").animate({width:"20%"});
</script><div id="content">
</code>
$("#loading").show();
$("#loading div").animate({width:"20%"});
</script><div id="content">
</code>
显示40%,一般文章标题后面
<code>
<script type="text/javascript">
$("#loading").show();
$("#loading div").animate({width:"40%"});
</script>
</code>
<script type="text/javascript">
$("#loading").show();
$("#loading div").animate({width:"40%"});
</script>
</code>
显示60%，一般在评论列表处
<code><script type="text/javascript">
$("#loading").show();
$("#loading div").animate({width:"60%"});
</script></code>
$("#loading").show();
$("#loading div").animate({width:"60%"});
</script></code>
显示80%，一般在评论列表底部
<code><script type="text/javascript">
$("#loading").show();
$("#loading div").animate({width:"80%"});
</script></code>
$("#loading").show();
$("#loading div").animate({width:"80%"});
</script></code>
显示100%后，消失，一般在页面的Footer部分，也就是最后部分
<code><script type="text/javascript">
$("#loading div").animate({width:"100%"},function(){
setTimeout(function(){$("#loading").hide();},1000);
});
</script></code>
$("#loading div").animate({width:"100%"},function(){
setTimeout(function(){$("#loading").hide();},1000);
});
</script></code>
之上的代码也可以按照你主题的布局来进行适当的修改。
方法2 五秒内加载满
打开页面后5秒内让加载条自动加载至100%,我们依然使用上面的那段DIV和CSS
<code><div id="loading" style="display: none;"><div style="display: block;"></div></div>
</code>
</code>
CSS样式
<code>#loading {
height: 8px;
left: 0;
position: absolute;
z-index: 99999;
}</code>
height: 8px;
left: 0;
position: absolute;
z-index: 99999;
}</code>
不过在CSS中添加一句
<code>width: 20%;</code>
既首先显示%20，然后显示剩下的..
JS代码页很简单
<code><script type="text/javascript">
jQuery(document).ready(function() {jQuery("#loading").animate({width: "100%"},{queue: false,duration: 5000});});
</script></code>
jQuery(document).ready(function() {jQuery("#loading").animate({width: "100%"},{queue: false,duration: 5000});});
</script></code>
我一般把该代码放置在页面的最底部，实现页面加载条从20%加载到100%，
如果想获得更得的效果，你可以显示一张背景，不同的进度显示不同的颜色.