Loper主题添加主题加载进度条Loper主题本来就是很低调很简单的主题,除了有实用的功能其他装饰效果都没有,拽立网,我个人喜欢把主题乱添加其他装饰功能,偶尔给我发现其他网站加载进度条效果感觉蛮不错的,今天我就把Loper主题添加主题加载进度条方法分享给大家,请看以下操作!

修改后的效果图!

Loper主题添加主题加载进度条

1.登陆你的后台管理,选择【外观】-【编辑】-【顶部 (header.php)】

直接添加以下全部代码:【在<body>后面位置添加】

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

 

然后又在顶部添加以下全部代码:【</script>后面位置添加】

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

 

2.登陆你的后台管理,选择【外观】-【编辑】-【底部 (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>

 

3.登陆你的后台管理,选择【外观】-【编辑】-【样式表 (style.css)】

直接添加以下全部代码:【最底部位置】

/*加载进度条*/
#w-loading{position:absolute;top:0;left:0;z-index:99999;width:100%;height:2px}
#w-loading div{width:0;height:2px;background:#222}

 

提示:【height:2px】是进度条大小随你改,【#222】颜色代码随你改!默认黑色!

» 原创文章:《Loper主题添加主题加载进度条》 » 本文地址:《http://www.zlinet.com/47.html
©版权声明:《拽立网》 » 转载请务必注明出处,喜欢本文或觉得本文对您有帮助,请分享给您的朋友 ^_^