原生js 仿微信网页加载进度条的提示

一些H5页面在网络加载时，事件会一直监听并触发 readystatechange 事件。某些需要提示网页 加载进度，进行进度条提醒的友好提示，类似微信访问微信公众号会出现进度条。一下分享提供大家参考学习。

用原声JS实现的方法，只需要引入js脚本文件到页面头部。

引入progress.js。 添加到网页头部。

document.addEventListener('readystatechange',function() {
    var state = document.readyState;
    if('interactive' == state)  {
        var create_progress = document.createElement("div");
        create_progress.setAttribute("class","page_progress_mes");
        create_progress.setAttribute("style","position: fixed;top:0px;border: 1px rgb(86, 188, 58) solid;width: 0%;opacity: 1;transition-property:width,opacity;transition-delay: 0s;transition-timing-function: linear;transition-duration: 7s");
        document.body.appendChild(create_progress);

        setTimeout(function() {
            document.querySelector('.page_progress_mes').style.width = "90%";
        },0);

    }else{
        document.querySelector('.page_progress_mes').style.transitionDuration = "0.3s";
        document.querySelector('.page_progress_mes').style.width = "100%";
        setTimeout(function() {document.querySelector('.page_progress_mes').style.transitionDuration = "0.1s";
            document.querySelector('.page_progress_mes').style.opacity = '0';
        },300);
    }
});

附件源码地址：http://download.csdn.net/download/china_guanq/10172196