yyzone/src/assets/styles/components/loading-h.less

yyzone vue components and utils

@prefixLoadingHCls: ~'@{yy-css-prefix}loading-h';

@keyframes antSpinMove {
    to {
        opacity: 1;
    }
}
@keyframes antRotate {
    to {
        transform: rotate(405deg);
    }
}
.@{prefixLoadingHCls} {
    padding: 13px 0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    &-inner {
        position: relative;
        .square(1em);
        font-size: 12px;
        transform: rotate(45deg);
        animation: antRotate 1.6s infinite linear;
    }
    &-dot-item {
        position: absolute;
        display: block;
        .square(6px);
        background-color: @yy-primary-color;
        border-radius: 100%;
        transform: scale(.75);
        transform-origin: 50% 50%;
        opacity: .3;
        animation: antSpinMove 1s infinite linear alternate;
        &:nth-child(1) {
            top: 0;
            left: 0;
        }
        &:nth-child(2) {
            top: 0;
            right: 0;
            animation-delay: .4s;
        }
        &:nth-child(3) {
            bottom: 0;
            left: 0;
            animation-delay: .8s;
        }
        &:nth-child(4) {
            bottom: 0;
            right: 0;
            animation-delay: 1.2s;
        }
    }

    &-text {
        margin-left: 6px;
        font-size: @yy-font-size-small;
        color: @yy-text-info-color;
    }
}