Create Animated Loading Text with CSS

This was originally published on codinhood.com

Loading animations are a great way to give visual feedback when a user is waiting for some action to finish. In this tutorial, we will learn one method of animating text up and down like a wave to act as a loading animation.

HTML and CSS Setup

If we were animating the text as a group, then we could put all of the letters in one element. But this animation requires that each letter animates separately, therefore we need to separate each letter into its own element.

<div class="container">
  <div class="loading">
    <div class="loading__letter">L</div>
    <div class="loading__letter">o</div>
    <div class="loading__letter">a</div>
    <div class="loading__letter">d</div>
    <div class="loading__letter">i</div>
    <div class="loading__letter">n</div>
    <div class="loading__letter">g</div>
    <div class="loading__letter">.</div>
    <div class="loading__letter">.</div>
    <div class="loading__letter">.</div>
  </div>
</div>

The container class will center the text on the page and define the background color. The loading class uses flex-direct: row to force the loading_letter elements to render as a row.

.container {
  height: 100vh;
  background: #773d8c;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loading {
  display: flex;
  flex-direction: row;
}

Finally, define some basic styling for the text. The font Audiowide can be sourced from Google Fonts.

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

.loading__letter {
  font-size: 88px;
  font-weight: normal;
  letter-spacing: 4px;
  text-transform: uppercase;
  font-family: "Audiowide";
  color: #fec468;
}

Loading Text Animation

The @keyframe animation uses the translateY transform function to move each letter up 40 pixels and then back down to 0 pixels. We could define the peak of the animation at 50%, or half-way through the animation, but defining the peak a little earlier (40%) and finishing the animation a little earlier (80%) means there will be a small pause in between each iteration.

@keyframes bounce {
  0% {
    transform: translateY(0px);
  }
  40% {
    transform: translateY(-40px);
  }
  80%,
  100% {
    transform: translateY(0px);
  }
}

Update the .loading_letter class with the animation-name set to bounce, animation-duration set to 2s, and the animation-iteration-count to infinite.

.loading__letter {
  font-size: 88px;
  font-weight: normal;
  letter-spacing: 4px;
  text-transform: uppercase;
  animation-name: bounce;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

Since we're adding the exact same animation to each letter, with the exact same timing, the letters will animate as a group:

To create the wave animation we need to animate the letters one after each other, or sequentially. We can do this in CSS by adding an increasing the animation-delay for each letter in equal increments. The first letter will start immediately, the second letter will be delayed 0.1 seconds, the third letter 0.2 seconds, and so forth. Finally, we can select each letter in CSS using the nth-child(num) pseudo-class by passing in the position.

.loading__letter:nth-child(2) {
  animation-delay: 0.1s;
}
.loading__letter:nth-child(3) {
  animation-delay: 0.2s;
}
.loading__letter:nth-child(4) {
  animation-delay: 0.3s;
}
.loading__letter:nth-child(5) {
  animation-delay: 0.4s;
}
.loading__letter:nth-child(6) {
  animation-delay: 0.5s;
}
.loading__letter:nth-child(7) {
  animation-delay: 0.6s;
}
.loading__letter:nth-child(8) {
  animation-delay: 0.8s;
}
.loading__letter:nth-child(9) {
  animation-delay: 1s;
}
.loading__letter:nth-child(10) {
  animation-delay: 1.2s;
}

Try playing around with different delay increments, or try a different animation-timing-function like ease-in-out and see how it affects the animation.