页面加载进度条百分比实现的伪方法

网页进度条是能够带来更好的用户体验，避免加载过程中一度出现空白页面，但是由于目前浏览器不可以直接获取正在加载对象的大小。所以我们无法通过数据大小来实现 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">&nbsp;</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