.progress-bar{
    display: inline-block;
    width: 100%;
    margin-bottom: 30px;
}   

    .progress-bar:last-of-type{
        margin-bottom: 0;
    }
    /* .progress-bar + .progress-bar{
        margin-top: 30px;  <--- jei turi pora
    } */

    .progress-bar > .text{
        display: inline-block;
        width: 100%;
        color: #777;
        margin-bottom: 10px;
        font-size: 14px;
        line-height: 24px;
    }  
        .progress-bar > .text > .label {
            display: inline-block;
            float: left;
            text-transform: capitalize;
        }
        .progress-bar > .text > .value {
            display: inline-block;
            float: right;
        }   
    .progress-bar > .bar{
        display: inline-block;
        width:  100%;
        height: 4px;
        background-color: #EDEDED;
    }
        .progress-bar > .bar > .value{
            display: inline-block;
            width: 90%;
            height: 100%;
        }
            .progress-bar > .bar > .value > .loading {
                display: inline-block;
                width: 100%;
                height: 100%;
                background-color: #00A3F2;

                animation-name: loading;
                animation-duration: 2s;
                animation-iteration-count: 1;
                animation-play-state: running;
            }   
                .progress-bar:hover > .bar > .value > .loading{
                    animation-play-state: paused;
                }

        /* .progress-bar > .bar > .value-86{
            width: 86%;
 
        }
        .progress-bar > .bar > .value-50{
            width: 50%;
        } */  
        
@keyframes loading{
    0%{
        width: 0;
    }
    50%{
        width: 20%;
    }
    100%{
        width: 100%;
    }
}