index.less

@import '../../style/mixins/reset.less';

.@{spin-prefix} {
  .reset-component-new();

  position: relative;

  &-target-container {
    user-select: none;
    clear: both;
    &-relative {
      position: relative;
    }
    &-has-scroll {
      > .@{spin-prefix} {
        > .@{spin-prefix}-spinner {
          position: sticky;
          top: 50%;
          left: 50%;
        }
      }
    }
    > .@{spin-prefix} {
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      position: absolute;
      background-color: rgb(255 255 255 / 40%);
      pointer-events: auto;
    }
  }

  &-spinner {
    .spin-mask();

    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;

    &-tip-vertical {
      flex-direction: column;
      width: 100%;
      text-align: center;

      .@{spin-prefix}-spinner-tip {
        margin-top: @spacing-sm;
        min-height: @height-md;
        line-height: @height-md;
      }
    }

    &-tip-horizontal {
      .@{spin-prefix}-spinner-tip {
        margin-left: @spacing-sm;
      }
    }

    &-icon--rotate {
      animation: icon-spinning 1.5s infinite linear;
    }

    .spin-size(sm);
    .spin-size(md);
    .spin-size(lg);

    &-tip {
      color: @spin-tip-color;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    &-icon {
      color: @spin-icon-color;
    }
  }

  &-container {
    position: relative;
    transition: opacity @transition-duration-base;

    &-blur {
      opacity: 0.3;
      user-select: none;
      clear: both;
      overflow: hidden;
    }
  }
}

.spin-mask(@position: absolute) {
  position: @position;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  user-select: none;
}

.spin-size(@size) {
  &-@{size} {
    size: 1em;
    .@{spin-prefix}-spinner {
      @spin-size: 'spin-icon-size-@{size}';
      @font-size: 'spin-font-size-@{size}';

      &-icon {
        font-size: @@spin-size;
      }

      &-tip {
        .reset-font-size(@@font-size);
      }
    }
  }
}

@keyframes icon-spinning {
  100% {
    transform: rotate(360deg);
  }
}