有时候你是否看到在点击别人网站完成加载之前网站顶部有进度条在跑呢，你是否也想让你的网站拥有此特效呢。
这些特效呢，有的是使用js来完成的，在加载到代码是显示一个条出来，然后控制这个条的宽度，有的是通过CSS来实现的，今天就把代码贴出来，用来无插件为wordpress网站顶部添加彩色进度条，话不多说，代码如下：
js+CSS实现方法：
1.下载pace.min.js文件，
2.将pace.min.js放到主题根目录js目录中。
3.打开主题函数模板functions.php，将以下代码加入并保存：
PS：注意修改为对应的js文件路径
wp_enqueue_script('pace.min', get_theme_file_uri('/js/pace.min.js'), array('jquery'),'1.0',true);
4.将样式代码，添加到主题style.css最后:
/** 进度条样式**/
.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: #ff0000;
position: fixed;
z-index: 2000;
top: 0;
rightright: 100%;
width: 100%;
height: 3px;
}
保存后即可实现顶部进度条效果。以下文件内有多个效果样式，可自己甄选适合你网站的款式。
版权声明：本文内容由来自互联网，该文观点不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，请联系我们举报，一经查实，本站将立刻删除。