@import '../../style/default.less';

@page-xs-size: 16px;
@page-sm-size: 16px;
@page-large-size: 24px;

.whale-page-spinning {
    display: flex;
    justify-content: center;
    align-items: center;
}
.whale-page-spinning-loader {
    display: inline-block;
    // font-size: 2em;
    position: relative;
    height: @page-sm-size;
    width: @page-sm-size * 2;
    margin-left: -((@page-sm-size * 3 - @spin-dot-size)/2);
}
.ant-spin-sm {
    .whale-page-spinning-loader {
        margin-left: -((@page-sm-size * 3 - @spin-dot-size-sm)/2);
    }
}
.ant-spin-lg {
    .whale-page-spinning-loader {
        margin-left: -((@page-sm-size * 3 - @spin-dot-size-lg)/2);
    }
}
.whale-page-spinning-loader:before,
.whale-page-spinning-loader:after {
    content: '';
    display: block;
    height: @page-sm-size;
    position: absolute;
    width: @page-sm-size;
}

.whale-page-spinning-loader:before {
    animation: k-loadingK 2s ease-in-out infinite,
        k-loadingM.66s ease-in-out infinite;
    // background: #27374d;
    background: @primary-4;
}

.whale-page-spinning-loader:after {
    animation: k-loadingL 2s ease-in-out infinite,
        k-loadingN.66s ease-in-out infinite;
    // background: #27374d73;
    background: @primary-color;
}

.whale-page-spinning-circle:before,
.whale-page-spinning-circle:after {
    border-radius: 50%;
}
@keyframes k-loadingK {
    0% {
        left: 0;
        transform: scale(1.1);
    }
    50% {
        left: 100%;
        transform: scale(1);
    }
    100% {
        left: 0;
        transform: scale(1.1);
    }
}

@keyframes k-loadingL {
    0% {
        left: 100%;
        transform: scale(1.1);
    }
    50% {
        left: 0;
        transform: scale(1);
    }
    100% {
        left: 100%;
        transform: scale(1.1);
    }
}

@keyframes k-loadingM {
    0% {
        z-index: 0;
    }
    50% {
        z-index: 1;
    }
    100% {
        z-index: 0;
    }
}
@keyframes k-loadingN {
    0% {
        z-index: 1;
    }
    50% {
        z-index: 0;
    }
    100% {
        z-index: 1;
    }
}