网页加载进度条

网页加载顶部进度条

你是否想要一个像新浪微博那样的网页顶部加载进度条？ 

在你的页面加入下面代码就可以轻松实现了

<script src="http://cdn.bootcss.com/pace/1.0.2/pace.min.js"></script>    
<script>    
{    
function getElementsByClass(key){    
var arr = new Array();    
var tags=document.getElementsByTagName("*");    
    for(var i=0;i<tags.length;i++){    
        if(tags[i].className.match(new RegExp('(\\s|^)'+key+'(\\s|$)'))){    
            arr.push(tags[i]);    
        }    
    }    
return arr;    
}    
var timer = window.setInterval(function(){    
    var el = getElementsByClass('pace');    
    if(el.length>0){    
        var a = document.createElement('div');    
        a.setAttribute('class', 'spinner');    
        var b = document.createElement('div');    
        b.setAttribute('class', 'spinner-icon');    
        el[0].appendChild(a);    
        a.appendChild(b);    
        window.clearInterval(timer);    
    }    
}, 3);    
}    
</script>    
<style>    
.pace .spinner {    
position: fixed;    
top: 15px;    
right: 15px;    
z-index: 2000;    
display: block;    
}    
.pace .spinner-icon {    
width: 18px;    
height: 18px;    
-webkit-box-sizing: border-box;    
box-sizing: border-box;    
border: solid 2px transparent;    
border-top-color: #2299dd;    
border-left-color: #2299dd;    
border-radius: 50%;    
-webkit-animation: nprogress-spinner .4s linear infinite;    
animation: nprogress-spinner .4s linear infinite;    
}    
@-webkit-keyframes nprogress-spinner {    
0% {    
-webkit-transform: rotate(0deg);    
transform: rotate(0deg);    
}    
100% {    
-webkit-transform: rotate(360deg);    
transform: rotate(360deg);    
}    
}    
@keyframes nprogress-spinner {    
0% {    
-webkit-transform: rotate(0deg);    
transform: rotate(0deg);    
}    
100% {    
-webkit-transform: rotate(360deg);    
transform: rotate(360deg);    
}    
}    
@keyframes fadeOut {    
from {    
opacity: 1;    
}    
to {    
opacity: 0;    
}    
}    
.pace {    
-webkit-pointer-events: none;    
pointer-events: none;    
-webkit-user-select: none;    
-moz-user-select: none;    
user-select: none;    
-webkit-transition: opacity 0.8s ease-in-out;    
-moz-transition: opacity 0.8s ease-in-out;    
-o-transition: opacity 0.8s ease-in-out;    
transition: opacity 0.8s ease-in-out;    
}    
.pace-inactive {    
opacity:0;    
filter: alpha(opacity=0);    
}    
.pace .pace-progress {    
background: #2299dd;    
position: fixed;    
z-index: 2000;    
top: 0;    
right: 100%;    
width: 100%;    
height: 3px;    
box-shadow: 0 0 3px #2299dd;    
}    
</style>