.@{css-prefix}loading {
  display: inline-block;
  .bui-loading-icon{
    display: flex;
    width: 28px;
    height: 28px;
    .bui-icon-loading{
      width: 100%;
      height: 100%;
      .bui-loading-opacity-animation();
      .bui-loading-group {
        stroke: @loading-icon-color;
      }
    }
    &-small {
      .set-loading-size(@loading-icon-sm)
    }
    &-sm {
      .set-loading-size(@loading-icon-sm)
    }
    &-normal {
      .set-loading-size(@loading-icon-md)
    }
    &-md {
      .set-loading-size(@loading-icon-md)
    }
    &-xs {
      .set-loading-size(@loading-icon-xs)
    }
    &-lg {
      .set-loading-size(@loading-icon-lg)
    }
    &-xl {
      .set-loading-size(@loading-icon-xl)
    }
  }
  .set-loading-size(@size) {
    height: @size;
    width: @size;
  }
}
.@{css-prefix}loading-v {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 996;
  & when (@theme = dark) {
    background-color: @loading-v-dark-bg;
    opacity: .7;
  }
  & when not (@theme = dark) {
    background-color: @loading-v-bg;
  }
  .bui-loading-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
  }
  .bui-loading-icon{
    margin: auto;
  }
  .bui-loading-text {
    color: @loading-text-color;
    margin-top: 2px;
    &-xs, &-sm {
      font-size: @font-size-sm;
      line-height: @line-height-sm;
    }
    &-md {
      font-size: @font-size-md;
      line-height: @line-height-md;
      
    }
    &-lg {
      font-size: @font-size-lg;
      line-height: @line-height-lg;
      margin-top: 4px;
    }
    &-xl {
      font-size: @font-size-xl;
      line-height: @line-height-xl;
      margin-top: 6px;
    }
  }
}