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

发布时间:2018-05-11作者:laosun阅读(1445)

网页顶部真实的加载进度条,不需要手动修改

网页顶部真实的加载进度条和右上角三角形真实加载进度,不需要手动修改 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列表:

    1. Pace.start:开始显示进度条,如果你不是使用AMD或者Browserify来加载模块的话,这个会默认执行。

    2. Pace.restart:进度条重新加载以及显示。

    3. Pace.stop:隐藏进度条以及停止加载。

    4. Pace.track:监测一个或者多个请求任务。

    5. Pace.ignore:忽略一个或者多个请求任务。


    基本上大致使用方法就这些,还有其他的一些方法的使用,各位就前往到官网去查看更加详细的介绍。希望这个插件可以帮助到大家!


    更多详细的资料:http://github.hubspot.com/pace/


0 +1

版权声明

 jquery  前端  源码

 请文明留言

0 条评论