.VLProgressBar
{
 --border-width:4px;
 --border-style:solid;
 --border-color:var(--grey5);
 --border-radius:var(--UI-big-border-radius);
 --margin:1em;
 --outer-background-color:var(--grey2);
 --background-color:var(--blue4);
 --height:8px;
 border:var(--border-width) var(--border-style) var(--border-color);
 border-radius:var(--border-radius);
 margin:var(--margin);
 padding:0;
 overflow:hidden;
 background-color:var(--outer-background-color)
}

.VLProgressBar.tiny-progress
{
 --height:4px;
 --border-radius:var(--UI-small-border-radius);
 --border-width:1px
}

.VLProgressBar > div
{
 transform:scaleX(0);
 transform-origin:left;
 height:var(--height);
 background-color:var(--background-color);
 overflow:hidden
}

.VLProgressBar.undefined-progress
{
 --start-color:var(--white);
 --before-color:var(--blue4);
 --middle-color:var(--blue5);
 --after-color:var(--blue4);
 --end-color:var(--white);
 --start-percent:0%;
 --before-percent:35%;
 --middle-percent:50%;
 --after-percent:65%;
 --end-percent:100%;
 --duration:2s
}

.VLProgressBar.undefined-progress > div
{
 background:repeating-linear-gradient(to right, var(--start-color) var(--start-percent),
                                                var(--before-color) var(--before-percent),
                                                var(--middle-color) var(--middle-percent),
                                                var(--after-color) var(--after-percent),
                                                var(--end-color) var(--end-percent));
 width:100%;
 background-size:200% auto;
 background-position:0 100%;
 animation:undefined-progress-animation var(--duration) infinite;
 animation-fill-mode:forwards;
 animation-timing-function:linear;
}

@keyframes undefined-progress-animation
{
 0% { background-position:0 0 }
 100% { background-position:-200% 0 }
}