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.
Top comments (0)