@keyframes progress-active {
  0% {
    width: 0;
    opacity: .1;
  }

  20% {
    width: 0;
    opacity: .5;
  }

  to {
    width: 100%;
    opacity: 0;
  }
}

//
//progress-bar
//

.#{$progress-prefix-cls} {
  @include border-radius($progress-border-radius);
  flex: auto;
  overflow: hidden; // force rounded corners by cropping it
  font-size: $progress-font-size;
  line-height: $progress-height;
  text-align: center;
  background-color: $progress-bg;

  &-outer {
    display: flex;
    align-items: center;
  }

  &-bar {
    @include border-radius($progress-border-radius);
    position: relative;
    height: $progress-height;
    line-height: $progress-height;
    color: $progress-bar-color;
    background-color: $progress-bar-bg;

    .progress--active &::before {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      content: "";
      background: #fff;
      border-radius: $progress-height;
      opacity: 0;
      animation: progress-active 2.4s cubic-bezier(.23, 1, .32, 1) infinite;
    }
  }

  &-text {
    height: $progress-icon-font-size;
    margin-left: 10px;
    font-size: $progress-font-size;
    line-height: $progress-icon-font-size;
    color: $gray-light-45;
    text-align: left;
    white-space: nowrap;

    .#{$icon-prefix} {
      font-size: $progress-icon-font-size;
    }
  }

  &--sm {
    .progress-bar {
      height: $progress-height-sm;
      line-height: $progress-height-sm;
    }

    &.progress-text {
      font-size: $progress-font-size-sm;

      .#{$icon-prefix} {
        font-size: $progress-icon-font-size-sm;
      }
    }
  }
}


//
//progress-circle
//

.#{$progress-prefix-cls}-circle {
  //default size
  @include progress-circle-size($progress-circle-svg-width, $progress-circle-svg-height, $progress-circle-border-width, $progress-circle-text-font-size, $progress-circle-icon-font-size, $progress-circle-percent-font-size, $progress-circle-perimeter);

  position: relative;
  display: inline-block;

  &__text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  svg {
    display: block;
    transform: rotate(-90deg);
  }

  &__bg {
    stroke: $progress-circle-bg-color;
  }

  &__bar {
    border-radius: 50%;
    stroke-dashoffset: 0;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  //progress-circle size
  &--sm {
    @include progress-circle-size($progress-circle-svg-width-sm, $progress-circle-svg-height-sm, $progress-circle-border-width-sm, $progress-circle-text-font-size-sm, $progress-circle-icon-font-size-sm, $progress-circle-percent-font-size-sm, $progress-circle-perimeter-sm);
  }

  //color
  @each $color, $value in $color-status {
    &--#{$color} {
      .#{$progress-prefix-cls}-circle__bar {
        stroke: nth($value, 1);
      }

      .#{$progress-prefix-cls}-circle__text,
      .#{$icon-prefix} {
        display: inline-block;
        color: $gray-light-85;
      }
    }
  }
}