页面加载等待动画

当页面内容比较复杂时，页面内容需要较长的加载时间，用户在页面加载时长时间等待时，加入一些动画效果可以有效提高用户体验，这次为大家带来前端页面加载等待动画的加入过程和原理，为大家提供动画库，帮助大家了解设计方式。

1.页面加载动画原理

浏览器在进行页面加载时是按照文档从上到下加载的，部分在网页前面定义的内容会首先被加载；因此，我们可以把页面加载动画相关的内容写在页面最前面，保证页面加载时首先出现，当内容全部被加载后，使动画内容隐藏

2.书写动画

首先需要把动画内容写入页面，放在页面的最前面，并且设置宽度和高度与背景颜色，使动画能够覆盖整个页面

.loader{
        position: absolute ;
        background-color: white;
        width: 100vw;
        height: 100vh;
        margin: 0;
        padding: 0;
    }
    .scanner span {
            color: transparent;
            font-size: 1.4rem;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -5em;
    }
    .scanner span::before {
        content: "Loading...";
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 100%;
        border-right: 4px solid #6d11a7;
        overflow: hidden;
        color: #6d11a7;
        animation: load91371 2s linear infinite;
    }

    @keyframes load91371 {
        0%, 10%, 100% {
                width: 0;
        }

        10%,20%,30%,40%,50%,60%,70%,80%,90%,100% {
            border-right-color: transparent;
        }

        11%,21%,31%,41%,51%,61%,71%,81%,91% {
            border-right-color: #6d11a7;
        }

        60%, 80% {
            width: 100%;
        }
    }

class="loader">
        <div class="scanner">
          <span>Loading...span>
        div>
    </div>

3.使用js监听页面内容加载情况

使用js进行页面加载情况进行监听，当页面加载完成后，对动画进行隐藏

document.onreadystatechange=function(){
    console.log(document.readyState)
}
// 获取动画的dom
let loader = document.querySelector(".loader");
// 页面加载完成事件
window.onload = function () {
    // 加载完成，隐藏动画，显示内容
    loader.style.display = "none";
}

完成以上两步，该效果就完成了，但是这样并不满足一般需求，如果页面存在大量需要页面最初加载的文件，导致dom加载速度不够快，那么还是需要花费很多等待时间，那么就使用js在页面最前端将.loader加入到页面最前，才能实现更好的效果。