Loading Text Animation Effect using CSS
Last Updated :
24 Jul, 2024

There are a lot of animations possible in CSS and today we will look at the loading text animation. The basic idea behind the working of this animation is the application of animation delay. Every alphabet is delayed by .1s so that each alphabet animates with a little delay and give the loading animation.
HTML Code:
It is used to create the basic structure of the text loading animation. We will use <span> tag to display all alphabets in a linear fashion. The <span> tags are enclosed by <div> tag.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<title>Loading Text Animation using CSS</title>
</head>
<body>
<div class="geeks">
<span>G</span>
<span>E</span>
<span>E</span>
<span>K</span>
<span>S</span>
<span>F</span>
<span>O</span>
<span>R</span>
<span>G</span>
<span>E</span>
<span>E</span>
<span>K</span>
<span>S</span>
</div>
</body>
</html>
CSS Code:
The CSS property is used to apply animation effect. First, we apply animation to all the alphabets and then add some delay. The duration of delay can be adjusted according to the need. You can adjust the animation duration and keyframes to make the animation a little faster or slower.
CSS
<style>
.geeks {
height: 40px;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.geeks span {
font-family: -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto,Oxygen, Ubuntu, Cantarell,
"Open Sans", "Helvetica Neue", sans-serif;
font-size: 24px;
color: green;
display: inline-block;
transition: all 0.5s;
animation: animate 2s infinite;
}
.geeks span:nth-child(1) {
animation-delay: 0.1s;
}
.geeks span:nth-child(2) {
animation-delay: 0.2s;
}
.geeks span:nth-child(3) {
animation-delay: 0.3s;
}
.geeks span:nth-child(4) {
animation-delay: 0.4s;
}
.geeks span:nth-child(5) {
animation-delay: 0.5s;
}
.geeks span:nth-child(6) {
animation-delay: 0.6s;
}
.geeks span:nth-child(7) {
animation-delay: 0.7s;
}
.geeks span:nth-child(8) {
animation-delay: 0.8s;
}
.geeks span:nth-child(9) {
animation-delay: 0.9s;
}
.geeks span:nth-child(10) {
animation-delay: 1s;
}
.geeks span:nth-child(11) {
animation-delay: 1.1s;
}
.geeks span:nth-child(12) {
animation-delay: 1.2s;
}
.geeks span:nth-child(13) {
animation-delay: 1.3s;
}
@keyframes animate {
0% {
color: green;
transform: translateY(0);
margin-left: 0;
}
25% {
color: green;
transform: translateY(-15px);
margin-left: 10px;
}
100% {
color: green;
transform: translateY(0);
margin-left: 0;
}
}
</style>
Complete Code:
In this section, we will combine both HTML and CSS code to design a Loading Text Animation effect using HTML and CSS.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<title>Loading Text Animation using CSS</title>
<style>
.geeks {
height: 40px;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.geeks span {
font-family: -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto,Oxygen, Ubuntu, Cantarell,
"Open Sans", "Helvetica Neue", sans-serif;
font-size: 24px;
color: green;
display: inline-block;
transition: all 0.5s;
animation: animate 2s infinite;
}
.geeks span:nth-child(1) {
animation-delay: 0.1s;
}
.geeks span:nth-child(2) {
animation-delay: 0.2s;
}
.geeks span:nth-child(3) {
animation-delay: 0.3s;
}
.geeks span:nth-child(4) {
animation-delay: 0.4s;
}
.geeks span:nth-child(5) {
animation-delay: 0.5s;
}
.geeks span:nth-child(6) {
animation-delay: 0.6s;
}
.geeks span:nth-child(7) {
animation-delay: 0.7s;
}
.geeks span:nth-child(8) {
animation-delay: 0.8s;
}
.geeks span:nth-child(9) {
animation-delay: 0.9s;
}
.geeks span:nth-child(10) {
animation-delay: 1s;
}
.geeks span:nth-child(11) {
animation-delay: 1.1s;
}
.geeks span:nth-child(12) {
animation-delay: 1.2s;
}
.geeks span:nth-child(13) {
animation-delay: 1.3s;
}
@keyframes animate {
0% {
color: green;
transform: translateY(0);
margin-left: 0;
}
25% {
color: green;
transform: translateY(-15px);
margin-left: 10px;
}
100% {
color: green;
transform: translateY(0);
margin-left: 0;
}
}
</style>
</head>
<body>
<div class="geeks">
<span>G</span>
<span>E</span>
<span>E</span>
<span>K</span>
<span>S</span>
<span>F</span>
<span>O</span>
<span>R</span>
<span>G</span>
<span>E</span>
<span>E</span>
<span>K</span>
<span>S</span>
</div>
</body>
</html>
Output:
Similar Reads
Fading Text Animation Effect Using CSS3 The fading text animation effect is one of the most demanding effects on UI/UX designing. This effect can be achieved by using HTML5 and CSS3. In the fading text effect, whenever we load the window, the text will slowly start disappearing. We can implement this effect using the animation property in
2 min read
Text switching animation using CSS Text Switching animation is an essential part of modern web engagement concepts. There are many types of Text Switching animation, depending on your imagination as well. Here in this tutorial, we will be learning to transition the words with a blur effect. The words come from the front blurring out
4 min read
How to Create Circle Loading Animation Effect using CSS ? In this article, we will see how to create a circle-loading animation using HTML and CSS, along with understanding its basic implementation through the example. Generally, Loading Animation is utilized to wait for the content to be fully loaded on the webpage. If some pages don't contain the loader,
6 min read
How to Create Jumping Text 3D Animation Effect using CSS ? In this article, you will learn to implement Jumping Texts animation effect using simple HTML and CSS. HTML is used to create the structure of the page and CSS is used to set the styling. HTML Code: In this section, we will design the basic structure of the body. html <!DOCTYPE html> <html
4 min read
How to Create Page Loading Animation Effect using jQuery? In this article, we are going to learn how to create page loading animation effect (Please Wait, Loading... animation) using jQuery, A "Please Wait, Loading..." animation is a visual indication shown during data retrieval or processing, assuring users that content is being fetched or actions are in
6 min read