.screen-loader {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;

    animation: fade-in 1s steps(5, end);

    z-index: 1000;
}

.screen-loader img.bg {
        position: fixed;
        display: block;
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
           object-fit: cover;
        -o-object-position: center;
           object-position: center;
        z-index: -1;
    }

.screen-loader img.fufajka {
        position: absolute;
        max-width: 300px;
        width: 40%;
        bottom: 50px;
        left: 50px;
    }

.screen-loader .loading {
        position: fixed;
        width: 100%;
        max-width: 600px;
    }

.screen-loader .loading img.logo {
            width: 50%;
            max-width: 300px;
            margin: 0 auto;
            display: block;
            -o-object-fit: contain;
               object-fit: contain;
        }

.screen-loader .loading .progress-bar {
            width: 50%;
            margin: 5% auto;
            position: relative;
            height: 30px;
            /* TODO: Find a better solution */
            border-radius: 1000px;
            overflow: hidden;
        }

.screen-loader .loading .progress-bar img {
                display: block;
                -o-object-fit: contain;
                   object-fit: contain;
            }

.screen-loader .loading .progress-bar img.bar {
                    width: 100%;
                    z-index: 1;
                    position: absolute;
                }

.screen-loader .loading .progress-bar img.inner {
                    position: absolute;
                    left: -25%;
                    top: 18%;
                    width: 22%;

                    animation: progress 2s infinite linear;
                }

@keyframes progress {
    0% {
        left: -25%;
    }
    100% {
        left: 125%;
    }
}