网页进度条是能够带来更好的用户体验,避免加载过程中一度出现空白页面,但是由于目前浏览器不可以直接获取正在加载对象的大小。所以我们无法通过数据大小来实现 0%~100% 的加载显示过程。因此各种"偏方"随之而来,给出页面加载进度的一个“假象”,其实用户并不在乎页面是不是真的加载到了百分之几,更多人关心只是还要loading多久,so,以假乱真,让用户觉得希望就在下一秒 。٩(๑>◡<๑)۶
整体思路: 页面加载完成之前进度条逐步增加,如果增长至99%(或者其他)页面还未加载完成就保持该比例,页面加载完成时进度条立马增至100%并影藏。
代码如下:
CSS
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#progressbar{
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: white;
z-index: 99999;
}
#progressbar .border{
border: 1px solid #777;
width: 275px;
height: 14px;
padding: 1px;
position: absolute;
left: 50%;
top: 50%;
border-radius: 7px;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
}
#progressbar .bar{
background-color: #73c944;
width: 50%;
height: 14px;
border-radius: 6px;
overflow: hidden;
}
#progressbar .desc{
text-align: center;
font-size: 12px;
line-height: 24px;
}
</style>
HTML
<div id="progressbar">
<div class="border">
<div class="bar"> </div>
<div class="desc">正在加载...</div>
</div>
</div>
js
var loading = function(){
var ct = document.getElementById("progressbar"),
desc = ct.getElementsByTagName("div"),
idx = 0, time = 500, bar = desc[1], desc = desc[2],timer;
bar.setValue = function(n){
this.style.width = n + "%";
};
void function(){
bar.setValue(idx += (100 - idx) * .2);
timer = setTimeout(arguments.callee, time += 100);
}();
return {
remove: function(){
clearTimeout(timer);
desc.innerHTML = "加载完成";
bar.setValue(100);
setTimeout(function(){
ct.parentNode.removeChild(ct);
},500);
}
};
}();
setTimeout(loading.remove, 10000);//加载完成
效果预览:https://bestjhh.github.io/loading
完整代码:https://github.com/bestjhh/loading