@keyframes hideLoader{
    0%{ width: 100%; height: 100%; }
    100%{ width: 0; height: 0; }
 }
 body > div.loader{
        position: fixed;
        background: white;
        width: 100%;
        height: 100%;
        z-index: 1071;
        opacity: 0;
        transition: opacity .5s ease;
        overflow: hidden;
        pointer-events: none;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    body:not(.loaded) > div.loader{
        opacity: 1;
    }
    body:not(.loaded){
        overflow: hidden;
    }
 body.loaded > div.loader{
    animation: hideLoader .5s linear .5s forwards;
 }
 /* Typing Animation */
 .loading-animation {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    animation: typing 1s linear infinite alternate;
    position: relative;
    left: -12px;
  }
 
  @keyframes typing {
    0% {
      background-color: rgba(100,100,100, 1);
      box-shadow: 12px 0px 0px 0px rgba(100,100,100, 0.2),
        24px 0px 0px 0px rgba(100,100,100, 0.2);
    }
 
    25% {
      background-color: rgba(100,100,100, 0.4);
      box-shadow: 12px 0px 0px 0px rgba(100,100,100, 2),
        24px 0px 0px 0px rgba(100,100,100, 0.2);
    }
 
    75% {
      background-color: rgba(100,100,100, 0.4);
      box-shadow: 12px 0px 0px 0px rgba(100,100,100, 0.2),
        24px 0px 0px 0px rgba(100,100,100, 1);
    }
  }