#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%
    }
}