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

yyzone vue components and utils

@prefixLoadingCls: ~'@{yy-css-prefix}loading';
@keyframes antSpinMove {
    to {
        opacity: 1;
    }
}
@keyframes antRotate {
    to {
        transform: rotate(405deg);
    }
}
.@{prefixLoadingCls} {
    .square(1em);
    font-size: 32px;
    position: relative;
    margin-bottom: 8px;
    transform: rotate(45deg);
    animation: antRotate 1.2s infinite linear;
    .yy-icon {
        font-size: 20px;
    }

    &-wrapper {
        transition: @yy-transition-time ease opacity;
    }

    &-mask {
        .mask(10, transparent, absolute);

        // &-light {
        //     .mask(10, rgba(255, 255, 255, .6), absolute);
        // }

        // &-dark {
        //     .mask(10, rgba(0, 0, 0, .4), absolute);
        // }
    }
    
    &-dot-item {
        position: absolute;
        display: block;
        .square(14px);
        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;
        }
    }
    &-inner {
        .size(94px, 100px);
        .center();
        .flex();
        border-radius: 10px;
        font-size: @yy-font-size-small;
        color: @yy-primary-color;

        &-dark {
            // .opacity-dark(.8);
            .opacity-light(.9);
            // color: #ffffff;
            color: @yy-text-info-color;
        }

        &-light {
            .opacity-light(.9);
            color: @yy-text-info-color;
        }
    }
}