网页顶部真实的加载进度条，不需要手动修改 Html 代码

发布时间：2018-05-11作者：laosun阅读（3324）

网页顶部真实的加载进度条和右上角三角形真实加载进度，不需要手动修改 Html 代码（真实加载进度）

在页面中引入Pace.js，页面就会自动监测你的请求（包括Ajax请求），在事件循环滞后，会在页面记录加载的状态以及进度情况。此插件的兼容性很好，可以兼容IE8以上的所有主流插件，而且其强大之处在于，你还可以引入加载进度条的主题样式，你可以选择任意颜色和多种动画效果（例如简约、闪光灯，MAC OSX，左侧填充，顶部填充，计数器和弹跳等等动画效果），如果你擅长修改css动画，那你就可以做出无限种可能性的动画，为你的网站增添个性化特色！

<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>
<!-- 右上角三角 
<link href="http://cdn.bootcss.com/pace/1.0.2/themes/black/pace-theme-corner-indicator.min.css" rel="stylesheet">
-->

就这些代码放到你的网页中，就可以直接使用。具体修改颜色的，看css即可，很简单。

使用API.

Pace.js公开的API列表：