#loader {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background: #373536;
    display: flex;
    align-items: center;
    justify-content: center;
}

#loader .image-stack {
    width: 60px;
    height: 60px;
    position: relative;
}

#loader img {
    position: absolute;
}

#loader .image-stack .img-1 {
    animation: loader-image-1;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}

#loader .image-stack .img-2 {
    animation: loader-image-2;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}

#loader .image-stack .img-3 {
    animation: loader-image-3;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}

#loader .image-stack .img-4 {
    animation: loader-image-4;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}

@keyframes loader-image-1 {
    0% {
        width: 0px;
        height: 0px;
        top: 50%;
        left: 50%
    }
    5% {
        width: 100%;
        height: 100%;
        top: 0%;
        left: 0%
    }
    20% {
        width: 100%;
        height: 100%;
        top: 0%;
        left: 0%
    }
    25% {
        width: 0px;
        height: 0px;
        top: 50%;
        left: 50%
    }
    100% {
        width: 0px;
        height: 0px;
        top: 50%;
        left: 50%
    }
}


@keyframes loader-image-2 {
    0% {
        width: 0px;
        height: 0px;
        top: 50%;
        left: 50%
    }
    25% {
        width: 0px;
        height: 0px;
        top: 50%;
        left: 50%
    }
    30% {
        width: 100%;
        height: 100%;
        top: 0%;
        left: 0%
    }
    45% {
        width: 100%;
        height: 100%;
        top: 0%;
        left: 0%
    }
    50% {
        width: 0px;
        height: 0px;
        top: 50%;
        left: 50%
    }
    100% {
        width: 0px;
        height: 0px;
        top: 50%;
        left: 50%
    }
}


@keyframes loader-image-3 {
    0% {
        width: 0px;
        height: 0px;
        top: 50%;
        left: 50%
    }
    50% {
        width: 0px;
        height: 0px;
        top: 50%;
        left: 50%
    }
    55% {
        width: 100%;
        height: 100%;
        top: 0%;
        left: 0%
    }
    70% {
        width: 100%;
        height: 100%;
        top: 0%;
        left: 0%
    }
    75% {
        width: 0px;
        height: 0px;
        top: 50%;
        left: 50%
    }
    100% {
        width: 0px;
        height: 0px;
        top: 50%;
        left: 50%
    }
}

@keyframes loader-image-4 {
    0% {
        width: 0px;
        height: 0px;
        top: 50%;
        left: 50%
    }
    75% {
        width: 0px;
        height: 0px;
        top: 50%;
        left: 50%
    }
    80% {
        width: 100%;
        height: 100%;
        top: 0%;
        left: 0%
    }
    90% {
        width: 100%;
        height: 100%;
        top: 0%;
        left: 0%
    }
    95% {
        width: 0px;
        height: 0px;
        top: 50%;
        left: 50%
    }
    100% {
        width: 0px;
        height: 0px;
        top: 50%;
        left: 50%
    }
}