网站页面顶部加载中进度条图文教程

CMS教程
4月10日
编辑

Joker织梦开发者

最近浏览网页的时候发现有的网站导航栏顶部加载访问的时候有一个滚动条挺好看的，想着吧网站也加上一个滚动条，百度了下发现是通过Nprogress库实现显示加载进度条效果，设置方法挺简单的按照步骤操作添加就可以了，写个教程跟大家分享下。

项目地址

GitCode地址：https://gitcode.com/gh_mirrors/np/nprogress/overview

github地址：https://github.com/rstacruz/nprogress

部署教程

教程很简单只需三步就可以实现，下载nprogress.js文件上传到网站目录，在网站<body>标签内添加如下调用JS代码，最后添加css样式

nprogress.js文件在github或者GitCode仓库中下载

<script src="网址+文件存储路径/nprogress.js"></script>
<script>NProgress.start();setTimeout(function() { NProgress.done(); }, 1000);</script>

CSS代码

#nprogress {pointer-events:none;}
#nprogress .bar {background:#448ef6;position:fixed;z-index:1031;top:0;left:0;width:100%;height:2px;}
#nprogress .peg {display:block;position:absolute;right:0px;width:100px;height:100%;box-shadow:0 0 10px #29d,0 0 5px #29d;opacity:1.0;-webkit-transform:rotate(3deg) translate(0px,-4px);-ms-transform:rotate(3deg) translate(0px,-4px);transform:rotate(3deg) translate(0px,-4px);}
#nprogress .spinner {display:none;position:fixed;z-index:1031;top:8px;right:20px;}
#nprogress .spinner-icon {width:18px;height:18px;box-sizing:border-box;border:solid 2px transparent;border-top-color:#29d;border-left-color:#29d;border-radius:50%;-webkit-animation:nprogress-spinner 400ms linear infinite;animation:nprogress-spinner 400ms linear infinite;}
.nprogress-custom-parent {overflow:hidden;position:relative;}
.nprogress-custom-parent #nprogress .spinner,.nprogress-custom-parent #nprogress .bar {position:absolute;}
@-webkit-keyframes nprogress-spinner {0% {-webkit-transform:rotate(0deg);}
100% {-webkit-transform:rotate(360deg);}
}
@keyframes nprogress-spinner {0% {transform:rotate(0deg);}
100% {transform:rotate(360deg);}
}