.nut-progress {
    position: relative;
    display: flex;
    .nut-progress-outer {
        flex: 1;
        background-color: #f3f3f3;
        border-radius: 100px;
        overflow: hidden;
        height: 12px;
        .nut-progress-inner {
            width: 30%;
            height: 100%;
            background-color: $primary-color;
            -webkit-transition: all .4s;
            transition: all .4s;
            position: relative;
            .nut-progress-text {
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                color: #FFF;
            }
        }
        .nut-active {
            &:before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                border-radius: 10px;
                animation: progressActive 2s ease-in-out infinite;
            }
        }
        @keyframes progressActive {
            0% {
                background: rgba(255, 255, 255, .1);
                width: 0;
            }
            20% {
                background: rgba(255, 255, 255, .5);
                width: 0;
            }
            to {
                background: rgba(255, 255, 255, 0);
                width: 100%;
            }
        }
        &.nut-progress-small {
            height: 12px;
            .nut-progress-text {
                font-size: 12px;
                line-height: 12px;
            }
        }
        &.nut-progress-base {
            height: 16px;
            .nut-progress-text {
                font-size: 12px;
                line-height: 16px;
            }
        }
        &.nut-progress-large {
            height: 20px;
            .nut-progress-text {
                font-size: 20px;
                line-height: 20px;
            }
        }
    }
    .nut-progress-outer-part {
        width: 90%;
    }
    .nut-progress-text {
        padding: 0 5px;
        font-size: 12px;
        line-height: 1;
    }
    .nut-icon-success {
        width: 10px;
        height: 10px;
        display: inline-block;
        background: url('#{$assetsPath}/img/success.png') no-repeat;
        background-size: cover;
    }
    .nut-icon-fail {
        width: 10px;
        height: 10px;
        display: inline-block;
        background: url('#{$assetsPath}/img/wrong.png') no-repeat;
        background-size: cover;
    }
}