h5页面防微信页面加载进度条效果

在页面头部加上

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);

    }

});