rsuite-theme/dist/less/loading.less

The suite theme for pagurian

@charset "utf-8";
//Created by yangguo on 2016/8/17 0017.
@import "mixins/loading";
@import "variables";

body {
    font-family: @font-family-base;
    margin: 0;
    padding: 0;
}

.rsuite-site-loading {
    width: 100%;
    text-align: center;
    position: absolute;
    top: 50%;
    margin-top: -50px;
    transition: opacity .45s;
    pointer-events: none;
    z-index: @zindex-loading;

    &:before {
        content: " ";
        display: block;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: white;
    }

    img {
        transform-style: preserve-3d;
        display: block;
        width: 64px;
        margin: 0 auto 10px;
        animation: loadTween 4s cubic-bezier(.785, .135, .15, .86) infinite;
        min-height: 48px;
    }

    #loading-text {
        color: @loading-text-color;
        font-size: 16px;
        letter-spacing: 2px;

        & > span {
            display: inline-block;
            font-weight: 200;

            &:first-child {
                animation: xLeftMatrixR 2s cubic-bezier(.645, .045, .355, 1) infinite alternate
            }

            &:last-child {
                animation: xRightMatrixR 2s cubic-bezier(.645, .045, .355, 1) infinite alternate
            }

            &.blank {
                width: .4em
            }
        }
    }
}

.generate-letter(5);

@keyframes loadTween {
    0% {
        transform: rotateY(0deg)
    }

    20% {
        transform: rotateY(180deg)
    }

    40% {
        transform: rotateZ(180deg)
    }

    60% {

        transform: rotateY(180deg)
    }

    80% {
        transform: rotateY(0deg);
    }

    to {
        transform: rotateY(0deg);
    }
}

@keyframes xLeftMatrixR {
    0% {
        opacity: 1;
        transform: translateX(0) rotate(0deg) scale(1);
    }

    50% {
        opacity: 1;
        transform: translateX(0) rotate(0deg) scale(1);
    }

    to {
        opacity: 0;
        transform: translateX(-50px) rotate(-30deg) scale(1.5);
    }
}

@keyframes xRightMatrixR {
    0% {
        opacity: 1;
        transform: translateX(0) rotate(0deg) scale(1);
    }

    50% {
        opacity: 1;
        transform: translateX(0) rotate(0deg) scale(1);
    }

    to {
        opacity: 0;
        transform: translateX(50px) rotate(30deg) scale(1.5);
    }
}

@keyframes Load5 {
    0% {
        opacity: 1;
        transform: translate(0) rotate(0deg) scale(1);

    }

    50% {
        opacity: 1;
        transform: translate(0) rotate(0deg) scale(1);
    }

    to {
        opacity: 0;
        transform: translate(-30px, 30px) rotate(-30deg) scale(1.5);
    }
}

@keyframes Load4 {
    0% {
        opacity: 1;
        transform: translate(0) rotate(0deg) scale(1);
    }

    50% {
        opacity: 1;
        transform: translate(0) rotate(0deg) scale(1);
    }

    to {
        opacity: 0;
        transform: translate(30px, -30px) rotate(-30deg) scale(1.5);
    }
}

@keyframes Load3 {
    0% {
        opacity: 1;
        transform: translate(0) rotate(0deg) scale(1);
    }

    50% {
        opacity: 1;
        transform: translate(0) rotate(0deg) scale(1);
    }

    to {
        opacity: 0;
        transform: translate(-30px, -30px) rotate(30deg) scale(1.5);
    }
}

@keyframes Load2 {
    0% {
        opacity: 1;
        transform: translate(0) rotate(0deg) scale(1);
    }

    50% {
        opacity: 1;
        transform: translate(0) rotate(0deg) scale(1);
    }

    to {
        opacity: 0;
        transform: translate(-30px, 30px) rotate(-30deg) scale(1.5);
    }
}

@keyframes Load1 {
    0% {
        opacity: 1;
        transform: translate(0) rotate(0deg) scale(1);
    }

    50% {
        opacity: 1;
        transform: translate(0) rotate(0deg) scale(1);
    }

    to {
        opacity: 0;
        transform: translate(30px, 30px) rotate(30deg) scale(1.5);
    }
}

@keyframes Load0 {
    0% {
        opacity: 1;
        transform: translate(0) rotate(0deg) scale(1);
    }

    50% {
        opacity: 1;
        transform: translate(0) rotate(0deg) scale(1);
    }

    to {
        opacity: 0;
        transform: translate(30px, -30px) rotate(-30deg) scale(1.5);
    }
}