amis/scss/components/_status.scss

.#{$ns}StatusField {
    white-space: nowrap;

    &-label {
        font-size: $fontSizeSm;
        margin-left: $gap-sm;
    }

    @keyframes animation-rolling_red {
        0% {
            left: 0
        }
    
        50% {
            left: px2rem(13px)
        }
    
        100% {
            left: 0
        }
    }
    
    @keyframes animation-rolling_blue {
        0% {
            left: $gap-sm + $gap-base
        }
    
        50% {
            left: px2rem(12px)
        }
    
        100% {
            left: $gap-sm + $gap-base
        }
    }
    .#{$ns}Status-icon {
        &--danger, &--primary, &--rolling, &--success, &--warning{
            &::before {
                font-family: "iconfont";
                content: "\e632";
                font-style: normal;
            }
        }
        &--rolling {
            color: $warning;
            position: relative;
            left: $gap-md;
            &::before {
                font-size: inherit;
                color: $danger;
                position: absolute;
                left: 0;
                top: px2rem(1px);
                margin-left: px2rem(-27px);
                animation: animation-rolling_red 2s;
                animation-iteration-count: infinite;
            }
            &::after {
                font-family: "iconfont";
                content: "\e632";
                font-style:normal;
                font-size: inherit;
                color: $primary;
                position: absolute;
                left: $gap-sm + $gap-base;
                top: px2rem(1px);
                margin-left: px2rem(-39px);
                animation: animation-rolling_blue 2s;
                animation-iteration-count: infinite;
            }
        }
        &--success {
            &::before {
                color: $success;
            }
        }
        &--danger {
            &::before {
                color: $danger;
            }
        }
        &--warning {
            &::before {
                color: $warning;
            }
        }
        &--primary {
            &::before {
                color: $primary;
            }
        }
    }
    .#{$ns}Status-icon--rolling + &-label {
        color: $warning;
        position: relative;
        left: $gap-md;
    }

    .#{$ns}Status-icon--success + &-label {
        color: $success;
    }

    .#{$ns}Status-icon--danger + &-label {
        color: $danger;
    }

    .#{$ns}Status-icon--warning + &-label {
        color: $warning;
    }

    .#{$ns}Status-icon--primary + &-label {
        color: $primary;
    }

}