deer-ui/es/spin/style.less

React.js UI components for PC Web

@import '../styles/themes.less';
@import '../styles/animate.less';

@prefixCls: deer-ui-spin;

.@{prefixCls}{
    position: relative;
    height: 100%;
    .@{prefixCls}-blur{
        overflow: hidden;
        pointer-events: none;
        height: 100%;
        width: 100%;
        transition: opacity @animation-time @animation-type;
    }
    &-wrapper{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        background: @default-spin-bg;
        z-index: 200;
        align-items: center;
        .@{prefixCls}-wrapper-icon{
            font-size: @default-spin-default-font-size;
            svg  {
                display: inline-block;
                animation: deer-ui-spin @loading-time linear infinite;
            }
            &.@{prefixCls}-wrapper-icon-large{
                font-size: @default-spin-large-font-size;
            }
            &.@{prefixCls}-wrapper-icon-small{
                font-size: @default-spin-small-font-size;
            }
        }
        .@{prefixCls}-wrapper-tip{
            font-size: @default-spin-tip-font-size;
            font-weight: bold;
            margin-left: 10px;
        }
    }
}
.@{prefixCls}-spinning{
    .@{prefixCls}-indicator{
        font-size: @default-spin-indicator-font-size;
        color: @default-spin-indicator-color;
        svg{
            animation: deer-ui-spin @loading-time linear infinite;
        }
        &.@{prefixCls}-indicator-small {
            font-size: @default-spin-small-font-size;
        }
        &.@{prefixCls}-indicator-large {
            font-size: @default-spin-large-font-size;
        }
        &.@{prefixCls}-indicator-default {
            font-size: @default-spin-default-font-size;
        }
    }
}