#loader {
    background: #222;
    height: 100vh;
    height: calc(var(--vh, 1vh)*100);
    position: fixed;
    width: 100vw;
    z-index: 99
}

img {
    padding: 5px;
    width: 150px;
  }

#spinner {
    height: 120px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 120px
}

#spinner .square {
    animation: loading 1s infinite;
    
    background: rgba(169, 4, 202, 0);
    display: block;
    float: left;
    height: 40px;
    width: 40px
}

#s1.square {
    animation-delay: .125s
}

#s2.square {
    animation-delay: .25s
}

#s3.square {
    animation-delay: .875s
}

#s4.square {
    animation: none
}

#s5.square {
    animation-delay: .375s
}

#s6.square {
    animation-delay: .75s
}

#s7.square {
    animation-delay: .625s
}

#s8.square {
    animation-delay: .5s
}

@keyframes loading {
    0% {
        background: rgb(252, 143, 1)
    }

    to {
        background: rgba(189, 14, 14, 0.678)
    }
}