Create Animated Loading Text with CSS
Tags: css, codepen, webdev
Published: 2020-04-03 15:56:21


*This was originally published on [codinhood.com](https://codinhood.com/post/animated-loading-text-css)*


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.

{% codepen https://codepen.io/codypearce/pen/LYVoNGy %}

## 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.

```html
<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.

```css
.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](https://fonts.google.com/specimen/Audiowide).

```css
@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.

```css
@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`.

```css
.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:

![Letters animating as a group](https://codinhood.com/360b858f17ab817d45d0807fe6b16332/animate-as-group.gif)

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.

```css
.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;
}
```

![Letters animating as wave](https://codinhood.com/930778a6211d120497ae5319c51763bc/loading.gif)

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.