使用代码为网页顶部加上加载进度条

使用代码为网页顶部加上加载进度条

使用jQuery

• $({property: 0}).animate({property: 100}, {
• duration: 5000,//进度条加载进度的速度
• step: function() {
• var percentage = Math.round(this.property);
• $(#progress).css(width, percentage+"%");
• if(percentage == 100) {
• $("#progress").addClass("done");//100%后消失
• }
• }
• });

css代码

• body{
• margin:0;
• }
• #progress {
• position:fixed;
• height: 2px;
• background:#b91f1f;
• transition:opacity 500ms linear
• }
• #progress.done {
• opacity:0
• }
• #progress span {
• position:absolute;
• height:2px;
• opacity:1;
• width:150px;
• right:-10px;
• }
• @-webkit-keyframes pulse {
• 30% {
• opacity:.6
• }
• 60% {
• opacity:0;
• }
• 100% {
• opacity:.6
• }
• }

网页可以用JS在body头部插入一个元素，作为进度条，不想那么麻烦，也可以直接写代码

• <body>
• <div id="progress">
• <span><span>
• </div>
• <body>

使用插件

nprogress是一个jQuery插件，只有几K大小。使用起来非常方便和简单。

先引入

• <script src=nprogress.js></script>
• <link rel=stylesheet href=nprogress.css/>

控制显示，下面这两句代码，分别放到页面开头和网页加载完成事件里面即可。

• NProgress.start();//开始加载进度条
• NProgress.done();//停止显示进度条

控制进度条的速度

• NProgress.set(0.0); // Sorta same as .start()
• NProgress.set(0.4);
• NProgress.set(1.0); // Sorta same as .done()

下载和dome

https://ricostacruz.com/nprogress/