html {
  height: 100%;
  
  background-color: indianred;
  
  background-image:
    linear-gradient(white,white),
    linear-gradient(white,white),
    linear-gradient(white,white),
    linear-gradient(white,white),
    linear-gradient(white,white),
    linear-gradient(white,white),
    linear-gradient(white,white);
  
  background-position: 
    calc(50% - 30px) 50%,
    calc(50% - 20px) 50%,
    calc(50% - 10px) 50%,
    50% 50%,
    calc(50% + 10px) 50%,
    calc(50% + 20px) 50%,
    calc(50% + 30px) 50%;
  
  background-size: 
    5px 10px,
    5px 10px,
    5px 10px,
    5px 10px,
    5px 10px,
    5px 10px,
    5px 10px;
  background-repeat: no-repeat;
  
  animation: l-bars 1s linear infinite alternate;
  }

@keyframes l-bars {
  0% {  
    background-size: 
      5px 30px,
      5px 10px,
      5px 10px,
      5px 10px,
      5px 10px,
      5px 10px,
      5px 10px;
    }
  16.6% {  
    background-size: 
      5px 10px,
      5px 40px,
      5px 10px,
      5px 10px,
      5px 10px,
      5px 10px,
      5px 10px;
    }
  33.2% {  
    background-size: 
      5px 10px,
      5px 10px,
      5px 40px,
      5px 10px,
      5px 10px,
      5px 10px,
      5px 10px;
    }
  49.8% {  
    background-size: 
      5px 10px,
      5px 10px,
      5px 10px,
      5px 40px,
      5px 10px,
      5px 10px,
      5px 10px;
    }
  66.4% {  
    background-size: 
      5px 10px,
      5px 10px,
      5px 10px,
      5px 10px,
      5px 40px,
      5px 10px,
      5px 10px;
    }
  83% {  
    background-size: 
      5px 10px,
      5px 10px,
      5px 10px,
      5px 10px,
      5px 10px,
      5px 40px,
      5px 10px;
    }
  100% {  
    background-size: 
      5px 10px,
      5px 10px,
      5px 10px,
      5px 10px,
      5px 10px,
      5px 10px,
      5px 40px;
    }
  }