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

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

  // 加载指示器与文字垂直
  &--vertical {
    flex-direction: column;

    .#{$loading-prefix-cls}-text {
      margin-top: $loading-text-margin;
      margin-left: 0;
    }
  }
}

// 指示器为条形
.#{$loading-prefix-cls}-bar {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: $progress-zindex;
  width: 100%;

  &__inner {
    transition: width $transition-time linear;

    &--primary {
      background-color: $brand-primary;
    }

    &--danger {
      background-color: $brand-danger;
    }
  }
}

// 指示器为圆形
.#{$loading-prefix-cls}-spanner {
  position: relative;
  display: inline-block;
  width: $loading-spinner-width;
  height: $loading-spinner-width;
  overflow: hidden;
  vertical-align: middle;
  transition: top .2s ease;
  animation: rotation .9s infinite steps(8);

  &::after,
  &::before,
  i::after,
  i::before {
    position: absolute;
    top: 0;
    left: calc(50% - #{$loading-spinner-cell-width}/2);
    width: $loading-spinner-cell-width;
    height: $loading-spinner-cell-width *2.8;
    content: "";
    border-radius: $loading-spinner-cell-width;
    transform-origin: 50% $loading-spinner-width / 2;
  }

  @include loading-spanner-variant($loading-spinner-width, $loading-spinner-cell-width, $brand-primary);

  &.#{$loading-prefix-cls}-spanner--white {
    @include loading-spanner-variant($loading-spinner-width, $loading-spinner-cell-width, $white);
  }

  @each $key, $color in $color-status {
    &.#{$loading-prefix-cls}-spanner--#{$key} {
      @include loading-spanner-variant($loading-spinner-width, $loading-spinner-cell-width, $color);
    }
  }

  // size
  &--sm {
    width: $loading-spinner-width-sm;
    height: $loading-spinner-width-sm;

    &::after,
    &::before,
    i::after,
    i::before {
      left: calc(50% - #{$loading-spinner-cell-width-sm}/2);
      width: $loading-spinner-cell-width-sm;
      height: $loading-spinner-cell-width-sm *2.8;
      border-radius: $loading-spinner-cell-width-sm;
      transform-origin: 50% $loading-spinner-width-sm / 2;
    }

    @include loading-spanner-variant($loading-spinner-width-sm, $loading-spinner-cell-width-sm, $brand-primary);

    &.#{$loading-prefix-cls}-spanner--white {
      @include loading-spanner-variant($loading-spinner-width-sm, $loading-spinner-cell-width-sm, $white);
    }

    @each $key, $color in $color-status {
      &.#{$loading-prefix-cls}-spanner--#{$key} {
        @include loading-spanner-variant($loading-spinner-width-sm, $loading-spinner-cell-width-sm, $color);
      }
    }
  }

  &--lg {
    width: $loading-spinner-width-lg;
    height: $loading-spinner-width-lg;

    &::after,
    &::before,
    i::after,
    i::before {
      left: calc(50% - #{$loading-spinner-cell-width-lg}/2);
      width: $loading-spinner-cell-width-lg;
      height: $loading-spinner-cell-width-lg *2.8;
      border-radius: $loading-spinner-cell-width-lg;
      transform-origin: 50% $loading-spinner-width-lg / 2;
    }


    @include loading-spanner-variant($loading-spinner-width-lg, $loading-spinner-cell-width-lg, $brand-primary);

    &.#{$loading-prefix-cls}-spanner--white {
      @include loading-spanner-variant($loading-spinner-width-lg, $loading-spinner-cell-width-lg, $white);
    }

    @each $key, $color in $color-status {
      &.#{$loading-prefix-cls}-spanner--#{$key} {
        @include loading-spanner-variant($loading-spinner-width-lg, $loading-spinner-cell-width-lg, $color);
      }
    }
  }
}

//指示器为点形
.#{$loading-prefix-cls}-dot {
  &::before,
  &::after,
  i {
    display: inline-block;
    width: $loading-dot-size;
    height: $loading-dot-size;
    vertical-align: middle;
    content: "";
    background-color: $gray-12;
    border-radius: 50%;
    animation: bounce 1.4s infinite ease-in-out both;
  }

  &::before {
    animation-delay: -.32s;
  }

  i {
    animation-delay: -.16s;
  }
}

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

  100% {
    transform: rotate(360deg);
  }
}

@keyframes bounce {
  0%,
  80%,
  to {
    transform: scale(0);
  }

  40% {
    transform: scale(1);
  }
}

.#{$loading-prefix-cls} {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 99;
  margin: 0;
  font-size: 20px;
  color: $brand-primary;
  text-align: center;
  vertical-align: middle;
  background-color: hsla(0, 0%, 100%, .9);
  transition: opacity .3s;
  &__bar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    height: 2px;
    &__inner {
      // width: 100%;
      position: fixed;
      left: 0;
      height: 2px;
      transition: width $transition-time linear;
      &--success {
        background: $brand-primary;
      }
      &--error {
        background: $brand-danger;
      }
    }
  }
}

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