semi-design/packages/semi-foundation/spin/spin.scss

@import "./animation.scss";
@import './variables.scss';
@import './mixin.scss';

$module: #{$prefix}-spin;

.#{$module} {
    position: relative;
    display: inline-block;
    @include size($width-spin_middle);

    @keyframes #{$prefix}-animation-rotate {
        from {
            transform: rotate(0);
        }
        to {
            transform: rotate(360deg);
        }
    }

    &-wrapper {
        text-align: center;
        position: absolute;
        width: 100%;
        transform: translateY(-50%);
        top: 50%;
        color: $color-spin-bg;

        & > svg {
            animation: $animation_duration-spin_wrapper-spin linear infinite #{$prefix}-animation-rotate;
            animation-fill-mode: forwards;
            vertical-align: top;
            @include size($width-spin_middle);
        }
    }

    &-animate {
        display: inline-flex;
        animation: $animation_duration-spin_customChildren-spin linear infinite #{$prefix}-animation-rotate;
        animation-fill-mode: forwards;
    }

    &-children {
        opacity: $opacity-spin_children;
        user-select: none;
    }

    &-block {
        display: block;

        // 添加一个遮罩解决嵌套 Spin 穿透问题

        &::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
        }

        .#{$module}-wrapper {
            display: block;
        }

        &.#{$module} {
            height: auto;
            width: auto;
        }
    }

    &-hidden {
        &::after {
            content: none;
        }

        // 考虑到嵌套，.spin-chidren 节点的 opacity 由直接父级节点的 .spin-hidden 决定
        & > .#{$module}-children {
            opacity: 1;
            user-select: auto;
        }
    }
}

.#{$module}-small {
    @include size($width-spin_small);

    & > .#{$module}-wrapper svg {
        @include size($width-spin_small);
    }
}

.#{$module}-middle {
    @include size($width-spin_middle);

    & > .#{$module}-wrapper svg {
        @include size($width-spin_middle);
    }
}

.#{$module}-large {
    @include size($width-spin_large);

    & > .#{$module}-wrapper svg {
        @include size($width-spin_large);
    }
}

.#{$module}-container {
    overflow: hidden;
}

@import './rtl.scss';