加载动画(吃豆豆)

Loading吃豆豆动画

新建loading.ejs文件

在_partial 文件夹下新建loading.ejs

添加以下代码

代码语言：javascript复制

<style type="text/css">
    #loading-container{
    position: fixed;
    top: 0;
    left: 0;
    min-height: 100vh;
    width: 100vw;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #FFF;
    text-align: center;
    /* loader页面消失采用渐隐的方式*/
    -webkit-transition: opacity 1s ease;
    -moz-transition: opacity 1s ease;
    -o-transition: opacity 1s ease;
    transition: opacity 1s ease;
}
.loading-image{
    width: 120px;
    height: 50px;
    transform: translate(-50%);
}

.loading-image div:nth-child(2) {
    -webkit-animation: pacman-balls 1s linear 0s infinite;
    animation: pacman-balls 1s linear 0s infinite
}

.loading-image div:nth-child(3) {
    -webkit-animation: pacman-balls 1s linear .33s infinite;
    animation: pacman-balls 1s linear .33s infinite
}

.loading-image div:nth-child(4) {
    -webkit-animation: pacman-balls 1s linear .66s infinite;
    animation: pacman-balls 1s linear .66s infinite
}

.loading-image div:nth-child(5) {
    -webkit-animation: pacman-balls 1s linear .99s infinite;
    animation: pacman-balls 1s linear .99s infinite
}

.loading-image div:first-of-type {
    width: 0;
    height: 0;
    border: 25px solid #49b1f5;
    border-right-color: transparent;
    border-radius: 25px;
    -webkit-animation: rotate_pacman_half_up .5s 0s infinite;
    animation: rotate_pacman_half_up .5s 0s infinite;
}
.loading-image div:nth-child(2) {
    width: 0;
    height: 0;
    border: 25px solid #49b1f5;
    border-right-color: transparent;
    border-radius: 25px;
    -webkit-animation: rotate_pacman_half_down .5s 0s infinite;
    animation: rotate_pacman_half_down .5s 0s infinite;
    margin-top: -50px;
}
@-webkit-keyframes rotate_pacman_half_up {0% {transform: rotate(270deg)}50% {transform: rotate(1turn)}to {transform: rotate(270deg)}}

@keyframes rotate_pacman_half_up {0% {transform: rotate(270deg)}50% {transform: rotate(1turn)}to {transform: rotate(270deg)}}

@-webkit-keyframes rotate_pacman_half_down {0% {transform: rotate(90deg)}50% {transform: rotate(0deg)}to {transform: rotate(90deg)}}

@keyframes rotate_pacman_half_down {0% {transform: rotate(90deg)}50% {transform: rotate(0deg)}to {transform: rotate(90deg)}}

@-webkit-keyframes pacman-balls {75% {opacity: .7}to {transform: translate(-100px, -6.25px)}}

@keyframes pacman-balls {75% {opacity: .7}to {transform: translate(-100px, -6.25px)}}


.loading-image div:nth-child(3),
.loading-image div:nth-child(4),
.loading-image div:nth-child(5),
.loading-image div:nth-child(6){
    background-color: #49b1f5;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    margin: 2px;
    width: 10px;
    height: 10px;
    position: absolute;
    transform: translateY(-6.25px);
    top: 25px;
    left: 100px;
}
.loading-text{
    margin-bottom: 20vh;
    text-align: center;
    color: #2c3e50;
    font-size: 2rem;
    box-sizing: border-box;
    padding: 0 10px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
@media only screen and (max-width: 500px) {
    .loading-text{
        font-size: 1.5rem;
    }
}
.fadeout {
    opacity: 0;
    filter: alpha(opacity=0);
}
/* logo出现动画 */
@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}
@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);}}
</style>
<div id="loading-container">
    <p class="loading-text">嘘 ~ 正在从服务器偷取页面 . . . </p>
    <div class="loading-image">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>
<script>
    (function () {
        const loaded = function () {
            setTimeout(function () {
                const loader = document.getElementById("loading-container");
                loader.className = "fadeout";
                setTimeout(function () {
                    loader.style.display = "none";
                }, 500);
            }, <%- theme.loading.time %>);
        };
        loaded();
    })();
</script>

引用ejs文件

在 layout.ejs中引用loading.ejs

代码语言：javascript复制

<% if (theme.loading.enable) { %>
    <!--  加载动画，强制加载0.5s  -->
    <%- partial('_partial/loading') %>
<% } %>

添加配置文件

在主题配置文件（_config.yml）下添加以下配置

代码语言：javascript复制

# 加载动画
loading:
  enable: true
  time: 500 # 强制开启loading动画的时间 1000=1s,默认为0.5s

config ejs layout loading partial

0 人点赞