另一页

进度条

进度条能起到安慰的作用,用户更有耐心等待。网页加载的进度条通常也不会持续很长时间,因此没有必要根据网络请求判断进度,只需要做动画+onload时完成。

let style = document.createElement("style");
style.innerHTML = `        .progress-axdf{
    height:10px;width:100vw;background:rgb(255, 255, 176)
}
.progress-axdf::before{
    content: '';
    display: block;
    animation: progress-axdf;
    animation-duration: 3s;
    animation-fill-mode: forwards;
    height: 10px;
    width: 0vw;
    background: rgb(135, 207, 255);
}
.progress-fin::before{
   animation: progress-fin;
   animation-duration: .6s;
   animation-fill-mode: forwards;
}
@keyframes progress-axdf {
    0%{
        width: 0;
    }
    100%{
        width: 80vw;
    }
}
@keyframes progress-fin {
    0%{
        width: 80vw;
    }
    100%{
        width: 100vw;
    }
}`;

document.querySelector("head").appendChild(style);
let el = document.createElement("div");
el.classList.add("progress-axdf");
let root = document.querySelector("html");
root.insertBefore(el, root.firstChild);
let finProgress = () => {
  el.classList.add("progress-fin");
};

演示: