.barWrapper {
    box-sizing: border-box;
    width: 90%;
    /* background-color: white; */
    padding: 4px 6px;
    border: solid 1px #fff;
    margin-top: 24px;
    max-width: 400px;
    border-radius: 50px;
    position: relative;
}

.barBackground,
.loading-bar {
    width: 100%;
    display: flex;
    background: #c0c0c0;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
}

.backProgress {
    color: white;
}

.barProgress {
    position: absolute;
    top: 4px;
    overflow: hidden;
    border-radius: 50px;
    transition: max-width 0.2s cubic-bezier(0, 1.5, 0.5, 1);
    max-width: var(--loading-bar-progress);
}

.loadingBar {
    width: var(--loading-bar-width);
}

.frontProgress {
    color: black;
}