.progressbar {
    display: inline-flex;

    height: 50px;
    width: auto;
    padding: 5px 0px;

    font-family: inherit;

    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -webkit-transition: 0.4s linear;
    -moz-transition: 0.4s linear;
    -ms-transition: 0.4s linear;
    -o-transition: 0.4s linear;
    transition: 0.4s linear;

    -webkit-transition-property: width, background-color;
    -moz-transition-property: width, background-color;
    -ms-transition-property: width, background-color;
    -o-transition-property: width, background-color;
    transition-property: width, background-color;
}

.progressbar-title {
    display: inline-flex;
    position: relative;
    width: 190px;

    background: var(--progress-title-background-color);

    font-weight: bold;
    font-size: 1.1rem;

    color: var(--progress-title-color);
    -webkit-border-top-left-radius: 3px;
    -webkit-border-bottom-left-radius: 4px;
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-bottomleft: 3px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}

.progressbar-title span {
    display: inline-flex;
    align-items: center;

    padding: 10px;

    -webkit-border-top-left-radius: 3px;
    -webkit-border-bottom-left-radius: 3px;
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-bottomleft: 3px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}

.progressbar-bar {
    position: relative;

    width: var(--progressbar-width);
    height: var(--progressbar-height);

    background: url(../images/progressBar.png);
    background-position: center;
    background-size: 100% cover;
    background-repeat: no-repeat;

    animation: progress-idle 0s forwards,
        progress-fill var(--progressbar-duration) var(--progressbar-delay) steps(var(--progressbar-fill-frames)) forwards;
}

.progressbar-bar-10 {
    animation: progress-idle 0s forwards,
        progress-fill var(--progressbar-duration) var(--progressbar-delay) steps(var(--progressbar-fill-frames)) forwards,
        progress-highlight var(--progressbar-duration) var(--progressbar-highlight-delay) steps(var(--progressbar-highlight-frames)) forwards,
        progress-end var(--progressbar-duration) var(--progressbar-end-delay) steps(var(--progressbar-highlight-frames)) forwards;
}

.progressbar-bar-9 {
    --progressbar-fill-frames: 9;
    --progressbar-fill-end: calc(-1 * var(--progressbar-width) * var(--progressbar-fill-frames));
}

.progressbar-bar-8 {
    --progressbar-fill-frames: 8;
    --progressbar-fill-end: calc(-1 * var(--progressbar-width) * var(--progressbar-fill-frames));
}

.progressbar-bar-7 {
    --progressbar-fill-frames: 7;
    --progressbar-fill-end: calc(-1 * var(--progressbar-width) * var(--progressbar-fill-frames));
}

.progressbar-bar-6 {
    --progressbar-fill-frames: 6;
    --progressbar-fill-end: calc(-1 * var(--progressbar-width) * var(--progressbar-fill-frames));
}

:root {
    --progressbar-full-width: 1890px;
    --progressbar-height: 50px;
    --progressbar-width: calc(var(--progressbar-full-width) / 15);

    --progressbar-duration: calc(0.05s * var(--progressbar-fill-frames));

    --progressbar-delay: 1s;
    --progressbar-highlight-delay: calc(var(--progressbar-delay) + var(--progressbar-duration) + .5s);
    --progressbar-end-delay: calc(0.15s + calc(var(--progressbar-highlight-delay) + var(--progressbar-duration)));

    --progressbar-fill-frames: 10;
    --progressbar-fill-end: calc(-1 * var(--progressbar-width) * var(--progressbar-fill-frames));

    --progressbar-highlight-frames: 4;
    --progressbar-highlight-start: calc(-1 * var(--progressbar-width) * 10);
    --progressbar-highlight-end: calc(-1 * var(--progressbar-width) * 14);
}

@keyframes progress-idle {
    0% {
        background-position: 0;
    }

    100% {
        background-position: 0;
    }
}

@keyframes progress-end {
    0% {
        background-position: var(--progressbar-highlight-start);
    }

    100% {
        background-position: var(--progressbar-highlight-start);
    }
}

@keyframes progress-fill {
    0% {
        background-position: 0px;
    }

    100% {
        background-position: var(--progressbar-fill-end);
    }
}

@keyframes progress-highlight {
    0% {
        background-position: var(--progressbar-highlight-start);
    }

    100% {
        background-position: var(--progressbar-highlight-end);
    }
}