.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: 6px;
        background-color: #ccc;
    }
        .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: loading 2s forwards;
            }


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