首页 博客模板 网站素材 工具下载 建站教程 个人博客 生活咨询 博客大全

3.给网站加进度条跟随网站加载完自动消失

返回首页 浏览次数:
建华兄
微信号:S411998413 2018-05-30

下面是截图(截图不够清晰,请直接点击下面的查看预览):



说明:利用js实现加载网页顶部进度条,下面是css代码详细说明,可以自定义进度条宽和颜色,代码不用复制,下载的文件里面都有

<!--使用方法:将下面两行代码放到网站对应的头部head里面-->
<link rel="stylesheet" type="text/css" href="css.css" />
<script type="text/javascript"  src="js.js" ></script> 

.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;
}

转载请注明本文转自“建华兄个人博客
下载失效联系QQ:1249721215
本站所有下载解压密码为:jianhuax.com



热门排行