stair

:arrow_left:back

<div class="loading">Loading</div>

@import url(https://fonts.googleapis.com/css?family=Lato);

body {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: #2980b9;
}

.loading {
  display: flex;
  color: white;
  font-size: 3em;
  font-family: Lato, sans-serif;
  text-transform: uppercase;

  span {
    padding: 0 20px;
    line-height: 100px;
    background: #34495e;
    animation: bulge 2s infinite;
  }
}

@keyframes bulge {
  50% {
    box-shadow: 0 20px 0 #eee;
    transform: translateY(-35px);
  }
}

let loading = document.querySelector(".loading");
let letters = loading.textContent.split("");
loading.textContent = "";
letters.forEach((letter, i) => {
  let span = document.createElement("span");
  span.textContent = letter;
  span.style.animationDelay = `${i / 5}s`;
  loading.append(span);
});