@import (reference) "ui.less";

.rotate-loading(@size, @top: 0, @color: #111, @stroke: ceil(@size / 20)) {
    &::before, &::after {
        content: "\200B";
        position: absolute;
        left: 0;
        right: 0;
        margin: auto;
        border: @stroke solid;
        box-sizing: border-box;
        border-radius: 100%;
        animation: pageLoadingRotate 1.2s 0s ease-in-out infinite;
    }
    &::before {
        @beforeSize: @size;
        width: @beforeSize;
        height: @beforeSize;
        top: @top;
        border-color: transparent @color;
    }
    &::after {
        @afterSize: ceil(@size / 2 - @stroke / 3 * 2);
        width: @afterSize;
        height: @afterSize;
        top: @top + ceil((@size - @afterSize) / 2);
        animation-duration: 0.6s;
        border-color: @color transparent;
        animation-direction: reverse;
    }
}
.loading-frame() {
    width: 120px;
    padding: 95px 10px 15px;
    font-size: 14px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
    color: @color-white;
    background-color: fade(@color-base, 50%);
}
.page-loading {
    .loading-frame;
    .rotate-loading(60px, 20px, @color-white);
    height: 24px;
    line-height: 24px;
    border-radius: 8px;
    position: fixed;
    z-index: 1000;
}
@keyframes pageLoadingRotate {
    0% {
        transform: rotate(0deg) scale(1);
    }
    50% {
        transform: rotate(180deg) scale(0.6);
    }
    100% {
        transform: rotate(360deg) scale(1);
    }
}