.loading-indicator {
    height: var(--loading-indicator-height);
    position: fixed;
    overflow: hidden;
    background-color: rgb(var(--grey-100));
}

.loading-indicator-active {
    left: -50%;
    height: 3px;
    width: 40%;
    background-color: var(--loading-indicator-active-color);
    -webkit-animation: loading-indicator-animation .2s linear, loading-indicator-animation 3s linear 0.5s infinite;
    -moz-animation: loading-indicator-animation .2s linear, loading-indicator-animation 3s linear 0.5s infinite;
    animation: loading-indicator-animation .2s linear, loading-indicator-animation 3s linear 0.5s infinite;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

@keyframes loading-indicator-animation {
    0% {
        left: -40%;
    }
    50% {
        left: 30%;
        width: 70%;
    }
    100% {
        left: 100%;
        width: 100%;
    }
}

@media
screen and (max-width: 767.8px) {
.loading-indicator {
    background-color: var(--loading-indicator-background-color);
}}