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里。
//进度条加载!
$(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>');
}
}
});