.#{$loading-prefix-cls} {
  display: flex;
  align-items: center;
  justify-content: center;

  &__content {
    //margin-left: $loading-text-margin;
  }

  // 加载指示器与文字垂直
  &--vertical {
    flex-direction: column;
    .#{$loading-prefix-cls}-text {
      margin-top: $loading-text-margin;
      margin-left: 0;
    }
  }
}
@mixin spannerSize($width: $loading-spinner-width, $padding: $loading-spinner-padding, $cellWidth: $loading-spinner-cell-width, $cellHeight: $loading-spinner-cell-height) {
  width: $width;
  height: $width;
  &::after,
  &::before,
  i::after,
  i::before {
    top: $padding;
    left: calc(50% - #{$cellWidth}/ 2);
    width: $cellWidth;
    height: $cellHeight;
    border-radius: $cellWidth;
    transform-origin: 50% $width/2 - $padding;
    box-shadow: 0 ($width - $cellHeight - $padding * 2)  rgba(15, 118, 253, 1);
  }
}
// 指示器为长条圆形
.#{$loading-prefix-cls}-spanner {
  position: relative;
  display: inline-block;
  padding: .12rem;
  overflow: hidden;
  vertical-align: middle;
  transition: top 0.2s ease;
  animation: rotation 0.9s infinite steps(8);
  i:not(:first-child) {
    display: none;
  }
  &::after,
  &::before,
  i::after,
  i::before {
    position: absolute;
    content: '';
  }

  &::before {
    background: rgba(15, 118, 253, 0.5);
  }

  &::after {
    background: rgba(15, 118, 253, 0.4);
    transform: rotate(-45deg);
  }

  i::before {
    background: rgba(15, 118, 253, 0.3);
    transform: rotate(-90deg);
  }

  i::after {
    background: rgba(15, 118, 253, 0.2);
    transform: rotate(-135deg);
  }
  @include spannerSize($loading-spinner-width,$loading-spinner-padding,$loading-spinner-cell-width,$loading-spinner-cell-height);
  &--sm {
    @include spannerSize($loading-spinner-sm-width,$loading-spinner-sm-padding,$loading-spinner-sm-cell-width,$loading-spinner-sm-cell-height);
  }
  &--lg {
    @include spannerSize($loading-spinner-lg-width,$loading-spinner-lg-padding,$loading-spinner-lg-cell-width,$loading-spinner-lg-cell-height);
  }
}

.#{$loading-prefix-cls}__core {
  display: inline-block;
  transform: scale(0.81);
}

@mixin dotSize($width: $loading-dot-width,$padding:$loading-dot-padding, $dotSize: $loading-dot-size) {
  width: $width;
  height: $width;
  padding: $padding;
  i {
    left: $padding;
    right: $padding;
    top: calc(50% - #{$dotSize}/ 2);
  }
  i::before,
  i::after {
    width: $dotSize;
    height: $dotSize;
    background-color: $brand-primary;
  }
}

//指示器为点形
.#{$loading-prefix-cls}-dot {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  i {
    position: absolute;
    display: flex;
    justify-content: space-between;
    transform-origin: 50% 50%;
  }
  i::before,
  i::after {
    content: '';
    background-color: #000;
    border-radius: 50%;
    animation: bounce .9s infinite ease-in-out both;
  }

  i:nth-child(1) {
    transform:rotate(-90deg);
    &::before{
      animation-delay:0.1s;
    }
    &::after{
      animation-delay:0.5s;
    }
  }
  i:nth-child(2) {
    transform:rotate(-45deg);
    &::before{
      animation-delay:0.2s;
    }
    &::after{
      animation-delay:0.6s;
    }
  }
  i:nth-child(3) {
    &::before{
      animation-delay:0.3s;
    }
    &::after{
      animation-delay:0.7s;
    }
  }
  i:nth-child(4) {
    transform:rotate(45deg);
    &::before{
      animation-delay:0.4s;
    }
    &::after{
      animation-delay:0.8s;
    }
  }

  @include dotSize($loading-dot-width,$loading-dot-padding,$loading-dot-size);
  &--sm {
    @include dotSize($loading-dot-sm-width,$loading-dot-sm-padding,$loading-dot-sm-size)
  }
  &--lg {
    @include dotSize($loading-dot-lg-width,$loading-dot-lg-padding,$loading-dot-lg-size)
  }

}

// animations
@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes bounce {
  0%{
    transform: scale(1.2);
    opacity: 1;
  }
  100%{
    transform: scale(.3);
    opacity: 0.5;
  }
}