:root {
    --loader-track-color: var(--border-dark, #eee);
    --loader-primary-color: var(--primary-blue, #0B459C);
    --loader-secondary-color: var(--text-secondary, #494949);
}

.loader {
    height: 4px;
    width: 100%;
    --loader-track: var(--loader-track-color);
    --loader-primary: var(--loader-primary-color);
    --loader-secondary: var(--loader-secondary-color);
    --loader-gradient: no-repeat linear-gradient(var(--loader-primary) 0 0);
    --loader-gradient-secondary: no-repeat linear-gradient(var(--loader-secondary) 0 0);
    background: var(--loader-gradient), var(--loader-gradient-secondary), var(--loader-track);
    background-size: 60% 100%;
    animation: loader-progress 3s infinite;
}

.dark-theme .loader {
    --loader-track-color: var(--bg-light, #434343);
    --loader-secondary-color: var(--text-muted, #BDBDBD);
}

@keyframes loader-progress {
    0% {
        background-position: -150% 0, -150% 0;
    }
    66% {
        background-position: 250% 0, -150% 0;
    }
    100% {
        background-position: 250% 0, 250% 0;
    }
}