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

无道 2019-07-23 0 条评论 前端相关 阅读307 手机阅读

前言

某些通过Ajax加载数据的页面,如果直接显示空白会给人突兀的感觉。如果加一个Loading的效果,会有大大不一样的效果哦。

何为全屏?

我所谓的全屏就是将loading元素fixed,在最上面,而不影响页面本来元素的显示。

效果一

方块转换效果

代码

CSS

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

考虑兼容效果,需要您手动将@-webkit-keyframes等浏览器前缀代码。

HTML

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

效果展示

Loading效果

效果二

波浪加载效果

代码

CSS

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

HTML

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

效果展示

Loading效果2

效果三

加载条效果

代码

CSS

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

HTML

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

效果展示

Loading效果3

所有demo下载

文件下载

全文完 [
有帮助?打赏
支付宝打赏
微信打赏
]
标签: loading 前端 特效
修改: 2019-07-23 06:56
这篇文章还没有评论呢~
点击刷新/生成验证码
It's me
昵称:无道
坐标:成都
性别:
一个人,一介学生,一个儿子~ 愿你我都被世界温暖以待
迷思爱 公众号

新建了个公众号,会不定期分享一些小玩意,有提升效率的办公软件、有一些黑科技的软件、或教程等等。

爷~,要不关注下~~