CSS LOADING effect

<div class="container">
  <div class="loading">
    <div class="loading-text">
      <span>L</span>
      <span>O</span>
      <span>A</span>
      <span>D</span>
      <span>I</span>
      <span>N</span>
      <span>G</span>
    </div>
  </div>
</div>

@import url('https://fonts.googleapis.com/css?family=Quattrocento+Sans');

.loading {
  position: relative;
  width: 100%;
  height: 200px;
  border-radius: 8px;
  overflow: hidden;
}

.loading-text {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
  width: 100%;
  height: 100px;
  line-height: 100px;
  font-weight:800;
}

.loading-text span {
  display: inline-block;
  margin: 0 5px;
  color: #fff;
  font-family: 'Quattrocento Sans', sans-serif;
  filter: blur(0px);
  animation: blur-text 1.5s infinite linear alternate;
}

.loading-text span:nth-child(1) { animation-delay: 0s; }
.loading-text span:nth-child(2) { animation-delay: 0.2s; }
.loading-text span:nth-child(3) { animation-delay: 0.4s; }
.loading-text span:nth-child(4) { animation-delay: 0.6s; }
.loading-text span:nth-child(5) { animation-delay: 0.8s; }
.loading-text span:nth-child(6) { animation-delay: 1s; }
.loading-text span:nth-child(7) { animation-delay: 1.2s; }

@keyframes blur-text {
  0% { filter: blur(0px); }
  100% { filter: blur(4px); }
}