一些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);
    }
});