css3进度条效果
打开页面进入网站都会有等待时间，在等待时间的过程中显示加载进度是友好的用户体验告诉用户还剩多久能完成。效果就跟本站顶部进度条一样。
加载样式和pace.js
.pace {
-webkit-pointer-events: none;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
z-index: 2000;
position: fixed;
margin: auto;
top: 0;
left: 0;
height: 5px;
width:100%;
background: #fff;
border: 1px solid #2299dd;
overflow: hidden;
}
.pace .pace-progress {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
max-width: 100%;
position: fixed;
z-index: 2000;
display: block;
position: absolute;
top: 0;
right: 100%;
height: 100%;
width: 100%;
background: #2299dd;
}
.pace.pace-inactive {
display: none;
}
<script src="pace.min.js"></script>
接着简单设置配置JS
<script>
function load(time){
var x = new XMLHttpRequest()
x.open('GET', "https://sdeno.com/" + time, true); //输入你需要显示进度的网站
x.send();
};
load(20);
load(100);
load(500);
load(2000);
load(3000);
setTimeout(function(){
Pace.ignore(function(){
load(3100);
});
}, 4000);
Pace.on('hide', function(){
console.log('done');
});
</script>
http://github.hubspot.com/pace/docs/welcome/
如果你使用AMD或者requirejs来加载模块的话，你可以通过这样子来设置（例如：start）：
define(['pace'], function(pace){
pace.start({
document: false
});
});