acud/es/loading/style/index.less

acg react 组件库

@import '../../style/themes/index';
@import '../../style/mixins/index';

@loading-prefix-cls: ~'@{acud-prefix}-loading';

.@{loading-prefix-cls} {
    &-loading-wrapper {
        position: relative;
        // 影响子组件布局，注释掉 by zhousheng
        // display: inline-block;
    }

    &-children {
        filter: blur(1px);
    }

    &-loading-context {
        font-size: @loading-text-fontSize;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        color: @loading-text-color;
        background-color: rgba(@loading-modal-color, .9);
    }

    &-zIndex {
        z-index: 9;
    }

    &-bottom {
        flex-direction: column;
    }

    &-default {
        background-size: cover;
        width: @loading-middle-size;
        height: @loading-middle-size;
    }

    &-lg {
        width: @loading-large-size;
        height: @loading-large-size;
    }

    &-sm {
        width: @loading-small-size;
        height: @loading-small-size;
    }
    
    &-tip {
        margin-top: @loading-text-gap;
    }
    
    &-tip-right {
        margin-left: @loading-text-gap;
        margin-top: 0;
    }
}

.@{loading-prefix-cls}-begin {
    fill: #2468f2;
    stroke: #2468f2;
}

.@{loading-prefix-cls}-begin .circle1 {
    animation: circle1 1.8s ease infinite;
}
.@{loading-prefix-cls}-begin .circle2 {
    animation: circle2 1.8s ease infinite;
}
.@{loading-prefix-cls}-begin .circle3 {
    animation: circle3 1.8s ease infinite;
}
.@{loading-prefix-cls}-begin .circle4 {
    animation: circle4 1.8s ease infinite;
}
.@{loading-prefix-cls}-begin .circle5 {
    animation: circle5 1.8s ease infinite;
}
.@{loading-prefix-cls}-begin .circle6 {
    animation: circle6 1.8s ease infinite;
}
.@{loading-prefix-cls}-begin .frame {
    stroke-dashoffset: 900;
    stroke-dasharray: 900 2440;
    animation: frame 1.8s ease infinite;
}
@keyframes circle1 {
    0% {
        transform: translate3d(0%, 40%, 0);
    }
    30% {
        transform: translate3d(0%, 0%, 0);
    }
    70% {
        transform: translate3d(0%, 0%, 0);
    }
    100% {
        transform: translate3d(0%, 40%, 0);
    }
}
@keyframes circle2 {
    0% {
        transform: translate3d(-35%, 20%, 0);
    }
    30% {
        transform: translate3d(0%, 0%, 0);
    }
    70% {
        transform: translate3d(0%, 0%, 0);
    }
    100% {
        transform: translate3d(-35%, 20%, 0);
    }
}
@keyframes circle3 {
    0% {
        transform: translate3d(-35%, -20%, 0);
    }
    30% {
        transform: translate3d(0%, 0%, 0);
    }
    70% {
        transform: translate3d(0%, 0%, 0);
    }
    100% {
        transform: translate3d(-35%, -20%, 0);
    }
}
@keyframes circle4 {
    0% {
        transform: translate3d(0%, -40%, 0);
    }
    30% {
        transform: translate3d(0%, 0%, 0);
    }
    70% {
        transform: translate3d(0%, 0%, 0);
    }
    100% {
        transform: translate3d(0%, -40%, 0);
    }
}
@keyframes circle5 {
    0% {
        transform: translate3d(35%, -20%, 0);
    }
    30% {
        transform: translate3d(0%, 0%, 0);
    }
    70% {
        transform: translate3d(0%, 0%, 0);
    }
    100% {
        transform: translate3d(35%, -20%, 0);
    }
}
@keyframes circle6 {
    0% {
        transform: translate3d(35%, 20%, 0);
    }
    30% {
        transform: translate3d(0%, 0%, 0);
    }
    70% {
        transform: translate3d(0%, 0%, 0);
    }
    100% {
        transform: translate3d(35%, 20%, 0);
    }
}
@keyframes frame {
    24.99% {
        stroke-dashoffset: 900;
    }
    25% {
        stroke-dashoffset: 900;
    }
    75% {
        stroke-dashoffset: -2440;
    }
    75.01% {
        stroke-dashoffset: 900;
    }
}