vue-easytable/packages/style/ve-loading.less

Vue table component

.ve-loading-parent-relative {
    position: relative !important;
}

.ve-loading-parent-lock {
    overflow: hidden !important;
}

.ve-loading {
    // overlay
    &.ve-loading-overlay {
        position: absolute;
        z-index: 1999;
        margin: 0;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }

    // fixed
    &.ve-loading-fixed {
        position: fixed !important;
    }

    // hide
    &.ve-loading-hide {
        display: none;
    }

    // spin container
    &-spin-container {
        position: absolute;
        top: 50%;
        margin-top: -20px;
        margin-left: -20px;
        width: 100%;
        text-align: center;
        .ve-loading-spin {
            display: inline-block;
        }
    }

    /* plane */
    &-plane {
        animation: sk-plane 1.2s infinite ease-in-out;
    }

    @keyframes sk-plane {
        0% {
            transform: perspective(120px) rotateX(0deg) rotateY(0deg);
        }
        50% {
            transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
        }
        100% {
            transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
        }
    }

    /* bounce */
    &-bounce {
        position: relative;

        &-dot {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            /* background-color: var(--sk-color); */
            opacity: 0.6;
            position: absolute;
            top: 0;
            left: 0;
            animation: sk-bounce 2s infinite
                cubic-bezier(0.455, 0.03, 0.515, 0.955);
        }

        &-dot:nth-child(2) {
            animation-delay: -1s;
        }
    }

    @keyframes sk-bounce {
        0%,
        100% {
            transform: scale(0);
        }
        45%,
        55% {
            transform: scale(1);
        }
    }

    /* wave */
    &-wave {
        display: flex;
        justify-content: space-between;

        &-rect {
            height: 100%;
            width: 15%;
            animation: sk-wave 1.2s infinite ease-in-out;
        }

        &-rect:nth-child(1) {
            animation-delay: -1.2s;
        }
        &-rect:nth-child(2) {
            animation-delay: -1.1s;
        }
        &-rect:nth-child(3) {
            animation-delay: -1s;
        }
        &-rect:nth-child(4) {
            animation-delay: -0.9s;
        }
        &-rect:nth-child(5) {
            animation-delay: -0.8s;
        }
    }

    @keyframes sk-wave {
        0%,
        40%,
        100% {
            transform: scaleY(0.4);
        }
        20% {
            transform: scaleY(1);
        }
    }

    /* pulse */
    &-pulse {
        width: var(--sk-size);
        height: var(--sk-size);
        background-color: var(--sk-color);
        border-radius: 100%;
        animation: sk-pulse 1.2s infinite
            cubic-bezier(0.455, 0.03, 0.515, 0.955);
    }

    @keyframes sk-pulse {
        0% {
            transform: scale(0);
        }
        100% {
            transform: scale(1);
            opacity: 0;
        }
    }

    /* flow */
    &-flow {
        width: calc(var(--sk-size) * 1.3);
        height: calc(var(--sk-size) * 1.3);
        display: flex;
        justify-content: space-between;

        &-dot {
            width: 25%;
            height: 25%;
            background-color: var(--sk-color);
            border-radius: 50%;
            animation: sk-flow 1.4s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s
                infinite both;
        }

        &-dot:nth-child(1) {
            animation-delay: -0.3s;
        }
        &-dot:nth-child(2) {
            animation-delay: -0.15s;
        }

        @keyframes sk-flow {
            0%,
            80%,
            100% {
                transform: scale(0.3);
            }
            40% {
                transform: scale(1);
            }
        }
    }

    /* grid */
    &-grid {
        /* Cube positions
     * 1 2 3
     * 4 5 6
     * 7 8 9
     */

        &-cube {
            width: 33.33%;
            height: 33.33%;
            background-color: var(--sk-color);
            float: left;
            animation: sk-grid 1.3s infinite ease-in-out;
        }
        &-cube:nth-child(1) {
            animation-delay: 0.2s;
        }
        &-cube:nth-child(2) {
            animation-delay: 0.3s;
        }
        &-cube:nth-child(3) {
            animation-delay: 0.4s;
        }
        &-cube:nth-child(4) {
            animation-delay: 0.1s;
        }
        &:nth-child(5) {
            animation-delay: 0.2s;
        }
        &-cube:nth-child(6) {
            animation-delay: 0.3s;
        }
        &-cube:nth-child(7) {
            animation-delay: 0s;
        }
        &-cube:nth-child(8) {
            animation-delay: 0.1s;
        }
        &-cube:nth-child(9) {
            animation-delay: 0.2s;
        }

        @keyframes sk-grid {
            0%,
            70%,
            100% {
                transform: scale3D(1, 1, 1);
            }
            35% {
                transform: scale3D(0, 0, 1);
            }
        }
    }
}