三种页面Loading页面加载效果【全屏】

<style>
.page-loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background-color: rgba(0, 0, 0, .4); */
    /* opacity: 0; */
    transition: opacity .3s;
}

.page-loading .loading {
    position: absolute;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    background: #81ecec;
    perspective: 120px;
    /* transition: background .2s; */
    animation: pageLoading 1.8s infinite ease-in-out;
}

@keyframes pageLoading {
    0% {
        transform: perspective(120px) rotateX(0deg) rotateY(0deg);
        background: #55efc4;
    }

    50% {
        transform: rotateY(0deg) rotateX(-180.1deg);
        background: #74b9ff;
    }

    100% {
        transform: rotateY(-179.9deg) rotateX(-180deg);
        background: #00cec9;
    }
}

</style>

<div class="other">
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Saepe doloremque veniam earum magni quam illum vel itaque maiores, mollitia ad velit consequuntur beatae officia reiciendis dolorum dignissimos cumque. Ut adipisci totam quae illum, esse hic iste cupiditate repellat, ad, ipsam deleniti quis? Aliquam similique iure voluptas necessitatibus. Eaque est exercitationem reprehenderit at molestiae obcaecati! Soluta perspiciatis, consequuntur, fugiat sunt qui earum rem dolores nesciunt ipsam sequi voluptatem cumque quibusdam, eveniet numquam magnam id aliquid cupiditate consequatur similique enim error accusantium tempora iure? Doloribus reiciendis quod corporis, aperiam deserunt voluptatem quo omnis obcaecati distinctio numquam vitae et ut ipsam. Officiis, quam.
</div>
<div class="page-loading">
    <span class="loading"></span>
</div>

<style>
body {
    background-color: #ffff;
}
.page-loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background-color: rgba(0, 0, 0, .4); */
}

.page-loading .loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    perspective: 120px;
}
.page-loading .loading .bar {
    /* position: absolute; */
    display: inline-block;
    height: 60px;
    width: 6px;
    background: white;
    transform-origin: bottom center;
    /* padding: 0 5px; */
    animation: pageLoading 1.5s infinite ease-in-out;
}
.page-loading .loading .bar1 {
    animation-delay: .1s;
}
.page-loading .loading .bar2 {
    animation-delay: .2s;
}
.page-loading .loading .bar3 {
    animation-delay: .3s;
}
.page-loading .loading .bar4 {
    animation-delay: .4s;
}
.page-loading .loading .bar5 {
    animation-delay: .5s;
}
.page-loading .loading .bar6 {
    animation-delay: .6s;
}
.page-loading .loading .bar7 {
    animation-delay: .7s;
}
.page-loading .loading .bar8 {
    animation-delay: .8s;
}
@keyframes pageLoading {
    0% {
        transform: scaleY(0.1);
        background-color: #ffffff;
    }
    50% {
        transform: scaleY(1);
        background-color: #2ecc71;
    }
    100% {
        transform: scaleY(0.1);
        background-color: transparent;
    }
}
</style>

<div class="other">
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Natus maiores reprehenderit commodi recusandae dolorum, facilis harum aut ut, cumque dolorem non nam ad possimus necessitatibus laborum est quod. Cupiditate voluptatum voluptates placeat sunt ipsa blanditiis cumque facilis! Dolorem provident consequuntur nesciunt at, qui porro iste eos delectus eius earum explicabo aliquam dignissimos cupiditate laborum quia ex dolore. Vitae quidem soluta sapiente, excepturi ad qui inventore et ea dolor eaque animi eos magni sed pariatur alias quis reprehenderit at placeat exercitationem tenetur, maxime sint? Est quibusdam optio perferendis vel doloribus pariatur id et obcaecati itaque? Asperiores totam rem mollitia delectus nostrum?
</div>
<div class="page-loading">
    <span class="loading">
        <span class="bar bar1"></span>
        <span class="bar bar2"></span>
        <span class="bar bar3"></span>
        <span class="bar bar4"></span>
        <span class="bar bar5"></span>
        <span class="bar bar6"></span>
        <span class="bar bar7"></span>
        <span class="bar bar8"></span>
    </span>
</div>

<style>
body {
    background-color: #ffff;
}

.page-loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background-color: rgba(0, 0, 0, .4); */
}

.page-loading .loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.page-loading .loading .line {
    width: 200px;
    height: 6px;
    /* margin: 50% 20px; */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(11, 232, 129, .8);
    border-radius: 4px;
}

.page-loading .loading span {
    display: inline-block;
    height: 13px;
    width: 13px;
    border-radius: 50%;
    position: absolute;
    top: -50%;
    left: 0;
    background: rgba(11, 232, 129, 1);
    animation: pageLoading 1.1s infinite linear alternate;
}

@keyframes pageLoading {
    from {
        left: 0;
    }

    to {
        left: 190px;
    }
}
</style>

<div class="other">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id iure ratione dolor sunt aperiam illum quasi ab repellat commodi facilis omnis voluptates delectus corrupti laudantium placeat, est corporis magni voluptatum hic suscipit repudiandae. Soluta, iure. Blanditiis accusamus quia at optio voluptates quas doloribus suscipit. A ad, magni, architecto inventore culpa neque dolores possimus nesciunt provident, rerum similique? Neque dicta excepturi officiis possimus modi eaque recusandae ab voluptatem nam quasi veritatis, soluta blanditiis laudantium amet, in sit suscipit autem aut cupiditate saepe, necessitatibus fugiat error natus repellat! Atque vitae, eveniet eligendi exercitationem maiores unde libero sint voluptatem fugit doloribus voluptates? Odio?
</div>
<div class="page-loading">
    <span class="loading">
        <div class="line">
            <span></span>
        </div>
    </span>
</div>