给emlog添加加载进度条

晚上无聊看别人的博客，发现不少博客都有这个进度条啊。但是都是WordPress的。于是就把它折腾进emlog了。

效果可以看我的网页顶部，一条灰色进度条。

需要你的模板加载jquery，简单的说下。这个效果，就是使用jquery库完成的。在加载代码的时候显示一个条出来，然后控制条的宽度。也就是说你把带有条的宽度的代码添加到合适的位置，就可以达到加载进度条的目的了。

方法如下：

1.在header.php中添加

<div id="w-loading"><div></div></div>

2.添加加载进度显示的位置这个添加到自己模板header.php合适的位置上。

<script type="text/javascript">
jQuery("#w-loading div").animate({width:"33%"});
</script>

上面代码中，width:”33%”可以更改。更改为自己需要的百分比。

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:20px;}
#w-loading div{width:0;height:20px;background:#ccc;}

可以自己修改颜色啥的，根据自己的模板改颜色吧～20px就是条的宽度。

7-16  再更新一种更简单实现进度条的、添加一处就可以、

<div id="web_loading"><div></div></div>
<script src="/ajaxjs/jquery-1.7.2.min.js" type="text/javascript"></script>  //如果当前页面已经加载了jquery，这句可去掉
<script type="text/javascript">// < ![CDATA[
    jQuery(document).ready(function(){
        jQuery("#web_loading div").animate({width:"100%"},800,function(){
            setTimeout(function(){jQuery("#web_loading div").fadeOut(500);
            });
        });
    });
// ]]></script>
<style>
#web_loading{
z-index:99999;
width:100%;
}
#web_loading div{
width:0;
height:5px;
background:#FF9F15;
}
</style>