tdesign-react/esm/style/web/components/loading/_index.less

TDesign Component for React

// 组件允许单个组件打包，因此默认引入公共基础样式

@import "../../base.less";

@import "./_var.less";

@import "../../utilities/_animation.less";

@import "../../mixins/_reset.less";

.@{prefix}-loading {
  .reset;

  position: relative;
  color: @loading-color;
  font-size: @loading-icon-size;

  &--lock {
    overflow: hidden;
  }

  &.@{prefix}-size-s {
    font-size: @loading-icon-size-small;
  }

  &.@{prefix}-size-l {
    font-size: @loading-icon-size-large;
  }

  &__parent--relative {
    position: relative !important;
  }
}

.@{prefix}-loading__fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: @z-index-loading;
}

.@{prefix}-loading--center {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  justify-content: center;
}

.@{prefix}-loading__content {
  position: absolute;
  left: 48%;
  top: 20%;
}

.@{prefix}-loading--inherit-color {
  color: inherit;
}

.@{prefix}-loading__parent {
  position: relative;
}

.@{prefix}-loading__overlay {
  background-color: @loading-mask-color;
}

/** 仅用于作为包裹元素时 */
.@{prefix}-loading--full {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: @z-index-loading;
}

.@{prefix}-loading--hidden {
  visibility: hidden;
}

.@{prefix}-loading--visible {
  visibility: visible;
}

.@{prefix}-loading__text {
  width: auto;
  display: inline-block;
  vertical-align: middle;
  font: @loading-text-size;
  margin-left: @loading-text-margin-left;
}

.@{prefix}-loading__gradient {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  vertical-align: middle;

  &-conic {
    width: 100%;
    height: 100%;
    border-radius: @border-radius-circle;
    /* stylelint-disable-next-line color-no-hex */
    background: conic-gradient(from 90deg at 50% 50%, #fff 0deg, currentcolor 360deg);
    /* stylelint-disable-next-line */
    -webkit-mask: radial-gradient(transparent calc(50% ~"-" .5px), #fff 50%);

    /* stylelint-disable-next-line color-no-hex */
    mask: radial-gradient(transparent calc(50% ~"-" .5px), #fff 50%);
  }
}