@charset "UTF-8";

.loading-overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    // linear-gradient(top, #d4977a, #d4977a)
    background-color: #d4977a;

    z-index: 9999;

    .loading-monkey {
        position: absolute;
        top: auto;
        height: 50%;
        bottom: 50%;
        left: 0;
        transform: translateY(-20px);
        width: 100%;

        background-image: url('http://static.leanote.top/x-resource/dzs/images/loading/1.png');
        background-repeat: no-repeat;
        background-position: center bottom;
        background-size: 20% auto;
        animation: change-loading-bg 0.3s infinite linear;
    }

    .loading-banner {
        position: absolute;
        width: 60%;
        height: 12px;
        left: 20%;
        top: 50%;
        border-radius: 6px;
        background-color: #ab6d0f;
        .loading-banner-inner {
            height: 100%;
            width: 0%;
            border-radius: 6px;
            background-color: #faaf3c;
        }
    }
}



@keyframes change-loading-bg {
    0% {
        background-image: url('http://static.leanote.top/x-resource/dzs/images/loading/1.png');
        transform: translateY(-20px);
    }
    33% {
        background-image: url('http://static.leanote.top/x-resource/dzs/images/loading/2.png');
        transform: translateY(-24px);
    }
    50% {
        background-image: url('http://static.leanote.top/x-resource/dzs/images/loading/2.png');
        transform: translateY(-26px);
    }
    66% {
        background-image: url('http://static.leanote.top/x-resource/dzs/images/loading/3.png');
        transform: translateY(-24px);
    }
    100% {
        background-image: url('http://static.leanote.top/x-resource/dzs/images/loading/1.png');
        transform: translateY(-20px);
    }
}