网页顶部加载进度条（真实加载进度）
网页顶部加载进度条（真实加载进度）
把下面这段代码放到head标签中即可
代码：
```js
<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&##124;^)'+key+'(\\s&##124;$)'))){
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>
<!-- 右上角三角
<link href="http://cdn.bootcss.com/pace/1.0.2/themes/black/pace-theme-corner-indicator.min.css" rel="stylesheet">
-->
```