.progress-bar{
    display: inline-block;
    width: 100%;
}
.progress-bar + .progress-bar{
    margin-top: 30px;
}
.progress-bar > .top {
        display: inline-block;
        width: 100%;
        margin-bottom: 10px;
        color: #777;
        font-size: 14px;
        line-height: 20px;
}
.progress-bar > .top > .label{
        display: inline-block;
        float: left;
}
.progress-bar > .top > .value{
        display: inline-block;
        float: right;
}
.progress-bar > .bottom {
    display: inline-block;
    width: 100%;
    height: 4px;
    background-color: grey;
}
.progress-bar > .bottom > .bar {
    display: inline-block;
    width: 80%;
    height: 100%;
}
.progress-bar > .bottom > .bar > .loader{
    display: inline-block;
    width: 0;
    height: 100%;
    background-color: var(--main_color);

}
.progress-bar.animate > .bottom > .bar > .loader{
    animation-name: loading;
    animation-iteration-count: 1; 
    animation-duration: 2s;
    animation-fill-mode: forwards;
}


@keyframes loading {
    0% {
        width: 0%;
    }
    100% {
        width: 100%;
    }

}