@-webkit-keyframes my-progress-active {
  0% {
    transform: translateX(-100%) scaleX(0);
    opacity: 0.1;
  }
  20% {
    transform: translateX(-100%) scaleX(0);
    // opacity: 0.5;
    opacity: 0.7;
  }
  100% {
    transform: translateX(0) scaleX(1);
    opacity: 0;
  }
}
@keyframes my-progress-active {
  0% {
    transform: translateX(-100%) scaleX(0);
    opacity: 0.1;
  }
  20% {
    transform: translateX(-100%) scaleX(0);
    // opacity: 0.5;
    opacity: 0.7;
  }
  100% {
    transform: translateX(0) scaleX(1);
    opacity: 0;
  }
}

.progress {
  position: relative;
  padding-top: 30px;

  &__outer {
    position: relative;
    width: 320px;
    height: 8px;
    box-sizing: content-box;
    overflow: hidden;
    background: #d5dbed;
    border: 4px solid #34446f;
    border-radius: 10px;
  }
  &__inner {
    position: absolute;
    width: 100%;
    height: 100%;
    transition: all 0.4s cubic-bezier(0.08, 0.82, 0.17, 1) 0s;
    left: -100%;

    :global {
      img {
        vertical-align: middle;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }
  &__bg {
    position: relative;
    z-index: 1;
    width: 0%;
    height: 100%;

    &::before {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      // background: #fff;
      background: #34446f;
      border-radius: 10px;
      opacity: 0;
      -webkit-animation: my-progress-active 2.4s cubic-bezier(0.23, 1, 0.32, 1)
        infinite;
      animation: my-progress-active 2.4s cubic-bezier(0.23, 1, 0.32, 1) infinite;
      content: '';
    }
  }
  &__text {
    transition: all 0.4s cubic-bezier(0.08, 0.82, 0.17, 1) 0s;
    font-size: 16px;
    font-weight: 800;
    // color: #34446f;
    color: #fff;
    position: absolute;
    transform: translateX(-50%);
    top: 0;
    left: 0;
  }
  &__tips {
    margin-top: 28px;
    text-align: center;
    font-size: 14px;
    // color: #7e878e;
    color: #fff;
    &.error {
      color: #ff4d4f;
    }
  }
}
