网页顶部加载进度条(真实加载进度)

2017-03-30· 1865 次浏览
网页顶部加载进度条(真实加载进度) 把下面这段代码放到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"> --> ```