给网站页面加进度条跟随网站加载完自动消失

发布时间 :2021-06-22

给网站页面加进度条跟随网站加载完自动消失

给网站页面加进度条跟随网站加载完自动消失
刷新本页面查看顶部进度条

使用方法:
1.下载源文件,上传到网站需要使用的对应目录
2.将下面两行代码放到网站对应的头部head里面

<link rel="stylesheet" type="text/css" href="css.css" />
<script type="text/javascript"  src="js.js" ></script>

3.修改调用css.css和js.js对应目录

进度条自定义教程,下载文件后修改css.css
.pace {
 -webkit-pointer-events:none;
 pointer-events:none;
 -webkit-user-select:none;
 -moz-user-select:none;
 user-select:none;
}
.pace-inactive {
 display:none;/*此段代码进度条跑完后隐藏*/
}
.pace .pace-progress {
 background:#ff0000;/*进度条颜色*/
 position:fixed;
 z-index:2000;
 top:0;
 left:0;/*进度条开始位置*/
 height:3px;/*进度条高度(宽度)*/
 -webkit-transition:width 0.1s;
 -moz-transition:width 0.1s;
 -o-transition:width 0.1s;
 transition:width 0.1s;
}




*有不懂的联系微信kukuboke
*转载请注明本文转自酷酷个人博客
https://www.kukuboke.com/muban/15.html

- END -