小小的梦想实现方法：
文本编辑器（UTF-8）打开header.php文件，找到<body>在其后添加以下代码：
|
1
|
<div id=“w-loading”></div>
|
仍然是这个文件随意位置添加以下代码：
|
1
2 3 |
<script type=“text/javascript”>// <![CDATA[
jQuery(“#w-loading div”).animate({width:“30%”}); // ]]></script> |
PS：这段代码主要是在浏览器加载到header的时候，顶部进度条就由‘隐身’变为‘可见’，并且长度以动画形式不断增加直到100%。这段代码可以重复添加 但width的值需要改变一下。
|
1
2 3 |
<script type=“text/javascript”>// <![CDATA[
jQuery(document).ready(function(){jQuery(“#w-loading div”).animate({width:“100%”},800,function(){setTimeout(function(){jQuery(“#w-loading div”).fadeOut(500);});});}); // ]]></script> |
PS：这段代码主要是让进度条在footer加载到100%之后，进度条消失。
恩，CSS样式是不可缺少的，将以下代码添加到style.css文件中：
|
1
2 3 |
/* 顶部加载进度条样式 */
#w-loading{position:absolute;top:0;left:0;z-index:99999;width:100%;height:2px} #w-loading div{width:0;height:2px;background:#222} |
PS：height:2px 进度条大小，background:#red 进度条颜色，这些样式都是可以根据自己的主题进行相关修改的。
