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

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

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

//
//progress-bar
//

.#{$progress-prefix-cls} {
  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;
  @include border-radius($progress-border-radius);

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

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

    .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;
    text-align: left;
    white-space: nowrap;

    .aid{
      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;

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



//
//progress-circle
//

.#{$progress-prefix-cls}-circle {
  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;
  }
  //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);

  //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);
  }

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

  //color
  @each $color,$value in $color-status {
    $gradient-color: nth($value,3);

    &--#{$color}{
      .#{$progress-prefix-cls}-circle__bar {
        stroke: nth($value,2);
      }

      .#{$progress-prefix-cls}-circle__text,
      .aid {
        @include text-gradient(nth($value,2), nth($gradient-color,2),nth($gradient-color,3));
      }
    }
  }
}