.spa-preloader {
    background-color: #2b2a31;
    height: 100%;
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    transition: opacity 300ms ease-out;
    z-index: 2000;
}

.spa-preloader__animation {
    animation: preloader-anim 2s steps(8) infinite;
    animation-play-state: paused;
    background: url(/f/media/preloader/loader.webp) no-repeat 0 0;
    background-size: cover;
    height: 150px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150px;
}

.spa-preloader.active {
    opacity: 1;
}

.spa-preloader.active .spa-preloader__animation {
    animation-play-state: running;
}

@keyframes preloader-anim {
    from {
        background-position: 0 0;
    }
    
    to {
        background-position: 0 -1200px;
    }
}