为WordPress主题顶部添加一个加载进度条

自己突发奇想,想为wordpress大前端的主题添加一个加载进度条,在网上查看了一些资料都不是我想要的,这里用到的其实也很简单就用了CSS3+JQ,话不多少开始上教程。

只试用与大前端主题 ,其他主题可以修改JS代码。

CSS代码部分

可以放到style.css也可以放到css目录里的mian.css里。

@keyframes loading-bar-move{0%{width:0;opacity:0}%{width:0;opacity:0}70%{width:100%;opacity:1}100%{width:100%;opacity:0}}
@-moz-keyframes loading-bar-move{0%{width:0;opacity:0}70%{width:100%;opacity:1}100%{width:100%;opacity:0}}
@-o-keyframes loading-bar-move{0%{width:0;opacity:0}70%{width:100%;opacity:1}100%{width:100%;opacity:0}}
@-webkit-keyframes loading-bar-move{0%{width:0;opacity:0}70%{width:100%;opacity:1}100%{width:100%;opacity:0}}
.progress{border-radius: 0;position: absolute;left:0;top:0;height:5px;animation:loading-bar-move 2s;-moz-animation:loading-bar-move 2s;-webkit-animation:loading-bar-move 2s;-o-animation:loading-bar-move 2s;}
.progress-bar{width:100%;}

JQ代码

可以放到JS文件夹里面的main.js里,当然如果自己为了区分开来,也可以自己建一个新的js文件,然后在网页底部引入即可。

 

//进度条加载!
$(document).on("click","a",function(){
 if( $(window).width()<768 ) return;
 if( $(this).attr('target')=='_blank' ) return;
 if( $(this).parent('#pagination-comments').length>0 ) return;
 var url = $(this).attr('href');
 var u = document.createElement('a');
 u.href = url,
 ru = u.protocol+u.hostname+u.pathname+u.search,
 l = location,
 rl = l.protocol+l.hostname+l.pathname+l.search;
 if(ru==rl) return;
 var urlreg=/^((https|http|ftp|rtsp|mms)?:\/\/)+[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/;
 if(urlreg.test(url)){
 n = $('.header');
 if( n.children('.progress').length<=0 ){
 n.prepend('<div class="progress"><div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar"></div></div>');
 }
 }
});

 

 

阅读全文
 收藏 (2) 打赏

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

未经允许不得转载:轻语博客 » 为WordPress主题顶部添加一个加载进度条
分享到: 生成海报
qux主题真好用,功能强大,界面美观,还一直在更新.....

热门推荐

评论 1

评论前必须登录!

立即登录   注册

    本站承接WordPress主题开发,主题定制,功能开发

    QQ咨询轻语云
    切换注册

    登录

    忘记密码 ?

    您也可以使用第三方帐号快捷登录

    切换登录

    注册

    我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活

    微信扫一扫关注
    如已关注,请回复“登录”二字获取验证码