.f-progress{
    display: inline-block;
    font-size: 0.875rem;
    color: rgba(0,0,0,.65);
    &.f-progress-line{
        position: relative;
        width: 100%;
        .f-progress-text{
            .f-progress-text-icon{
                font-size: 1.25rem;
            }
        }
    }
    .f-progress-outer{
        display: inline-block;
        width: 100%;
    }
    .f-progress-inner{
        position: relative;
        display: inline-block;
        width: 100%;
        overflow: hidden;
        vertical-align: middle;
        background-color: #efefef;
        border-radius: 100px;
    }
    .f-progress-bg,.f-progress-success-bg{
        position: relative;
        // background-color: #388fff;
        border-radius: 100px;
        transition: all .4s cubic-bezier(.08,.82,.17,1) 0s;
    }
    .f-progress-success-bg {
        position: absolute;
        top: 0;
        left: 0;
        // background-color: #51bd78;
      }
    .f-progress-text{
        display: inline-block;
        width: 1.75rem;
        margin-left: 0.5rem;
        color: rgba(0,0,0,.65);
        font-size: 1em;
        line-height: 1;
        white-space: nowrap;
        text-align: left;
        vertical-align: middle;
        word-break: normal;
    }
    &-status-active {
        .f-progress-bg::before {
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          background: #fff;
          border-radius: 0.625rem;
          opacity: 0;
          animation: f-progress-active 2.4s ease-in-out infinite;
          content: '';
        }
    }
    // &-status-success{
    //     .f-progress-bg{
    //         background-color: #51bd78;
    //     }
    // }
    // &-status-error{
    //     .f-progress-bg{
    //         background-color: #f24645;
    //     }
    // }
    &-show-info{
        .f-progress-outer{
            padding-right: 48px;
            margin-right: -48px;
        }
    }
    &.f-progress-circle{
        .f-progress-inner{
            position: relative;
            line-height: 1;
            background-color: transparent;
        }
        .f-progress-text{
            position: absolute;
            top: 50%;
            left: 50%;
            width: 100%;
            margin: 0;
            padding: 0;
            color: rgba(0,0,0,.65);
            line-height: 1;
            white-space: normal;
            text-align: center;
            transform: translate(-50%,-50%);
            .f-progress-text-icon{
                font-size: 1.3em;
                // &.f-icon-checkmark{
                //     color: #51bd78;
                // }
                // &.f-icon-x{
                //     color: #f24645;
                // }
            }
        }
    }
    // .f-progress-inner:not(.f-progress-circle-gradient) .f-progress-circle-path{
    //     stroke:#59a1ff;
    // }
    // &-status-success{
    //     .f-progress-inner:not(.f-progress-circle-gradient) .f-progress-circle-path{
    //         stroke:#51bd78;
    //     }
    // }
    // &-status-error{
    //     .f-progress-inner:not(.f-progress-circle-gradient) .f-progress-circle-path{
    //         stroke:#f24645;
    //     }
    // }
}

@keyframes f-progress-active {
    0% {
      width: 0;
      opacity: 0.1;
    }
    20% {
      width: 0;
      opacity: 0.5;
    }
    100% {
      width: 100%;
      opacity: 0;
    }
  }