前言
嗯。。大家一定见过很多站点都有这个加载进度条啊。
具体效果久伴就不截图了。欢迎刷新页面看网页头部啊。。一条灰色的进度条的说~
需要你的模板加载jquery库，加载方法在这里就不再敖述了。
简单说一下吧，这个效果呢，是使用jquery库来完成的，在加载到代码是显示一个条出来，然后控制这个条的宽度，也就是说，你把带有宽度的语句添加到合适的位置就可以达到加载进度显示的目的了。
方法如下：
1.在header.php中添加
- <div id=“w-loading”><div></div></div>
这个添加到自己模板header.php合适的位置上。久伴是添加在了header.php的标签中。
2.添加加载进度显示的位置
- <script type=“text/javascript”>
- jQuery(“#w-loading div”).animate({width:“33%”});
- </script>
上述代码中，width:”33%”可以更改。更改为自己需要的百分比。 久伴将上述代码放置到harder.php（20%）加载文章的循环之后（40%）和sidebar.php（60%）以及底边栏（80%）。
3.添加jQuery代码到footer.php
- <script type=“text/javascript”>
- jQuery(document).ready(function(){
- jQuery(“#w-loading div”).animate({width:“100%”},800,function(){
- setTimeout(function(){jQuery(“#w-loading div”).fadeOut(500);
- });
- });
- });
- </script>
4.添加CSS代码到style.css文件
- #w-loading{z-index:99999;position:absolute;left:0;top:0;width:100%;height:25px;}
- #w-loading div{width:0;height:25px;background:#ccc;}
可以按照自己的要求修改颜色啥的
