<div class="loading">
  <span>l</span>
  <span>o</span>
  <span>a</span>
  <span>d</span>
  <span>i</span>
  <span>n</span>
  <span>g</span>
  <span>.</span>
  <span>.</span>
  <span>.</span>
</div>
body{ 
  width: 100vw;
  height: 100vh;
  margin: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to bottom, #2980b9, #6dd5fa, #ffffff); 
  color: #fff;
  font-family: Averia Sans Libre, Fantasy;
}

.loading span {
  text-transform: uppercase;
  font-size: 4vw;
  font-weight: 600;
  opacity: 0;
  display: inline-block;
  padding: 0em .5em;
  
  animation: letterWave 2s infinite linear;

  @for $i from 0 through 10 {
    &:nth-child(#{$i}) {
      animation-delay: $i * 250ms;
    }
  }
}


@keyframes letterWave {
  0%, 100% {
    transform: translateY(0) scale(1);
    padding: 0 .5em;
    opacity: .8;
  }
  25%{
    transform: translateY(-1em) scale(.8);
    padding: 0 0em;
    opacity: .6;
  }
  75% {
    transform: translateY(1em) scale(1.5);
    padding: 0 1em;
    opacity: 1;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.