Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Loading Text Animation Effect using CSS
Nowadays, the animation is the most powerful feature in the applications to attract more users, and it increases users' interest in exploring the application. In web applications, we can create animations using HTML and CSS. However, we can create animations using JavaScript, but it makes the website slower.
In this tutorial, we will learn to load text animation using HTML and CSS. It is important to show loading text with animation while fetching data from API or loading web pages to make it more attractive.
Example 1
In the example below, we created the ‘loader’ div and ‘loader-inner’ div element inside it. In CSS, we set the fixed dimension for the loader div and added animation using the ‘rotation’ keyframes. We set the 3s animation time.
Furthermore, we have set the rotation-inner keyframes for the loader-inner div element and position inside the loader div element.
In the ‘rotation’ and ‘rotation-inner’ keyframes, we move the loader from 0 degrees to 360 degrees. Users can observe the rotating loader in the output with loading text in the middle.
<html>
<head>
<style>
.loader {
width: 100px;
height: 100px;
border-radius: 50%;
border: 6px dotted green;
position: relative;
animation: rotation 3s linear infinite;
}
.loader-inner {
position: absolute;
width: 70px;
height: 70px;
border-radius: 50%;
border-block: 6px solid yellow;
top: 10px;
left: 10px;
animation: rotation-inner 3s linear infinite;
}
.loader-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
@keyframes rotation {
from { transform: rotate(0deg);}
to { transform: rotate(360deg);}
}
@keyframes rotation-inner {
from { transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
</style>
</head>
<body>
<h2>Creating the <i> Loading text animation using the CSS </i></h2>
<div class = "loader">
<div class = "loader-inner"> </div>
<div class = "loader-text"> Loading </div>
</div>
</body>
</html>
Example 2
In the example below, we have created the loading bar. Here, we created the loader div element and bar div element inside that. We have set the dimensions for the loader div element and animation for the bar element in CSS.
We used the ‘bar-animation’ keyframes for the animation. In ‘bar-animation’, we change the width of the div element to make it like a loading bar.
<html>
<head>
<style>
.container { width: 200px; }
.loader {
width: 200px;
height: 15px;
position: relative;
overflow: hidden;
border: 2px solid blue;
border-radius: 5px;
}
.bar {
width: 0%;
height: 100%;
background-color: green;
animation: bar-animation 5s ease-in-out infinite;
}
span {
font-size: 1.3rem;
display: flex;
justify-content: center;
color: green;
}
@keyframes bar-animation {
0% {width: 0%;}
50% {width: 100%;}
100% {width: 0%;}
}
</style>
</head>
<body>
<h2>Creating the <i> Loading text animation using the CSS. </i> </h2>
<div class = "container">
<div class = "loader">
<div class = "bar"> </div>
</div>
<span> Loading </span>
</div>
</body>
</html>
Example 3
In the example below, we have created the bouncing loading text. Here, we have added every character of the Loading word in a separate div element. After that, we used the ‘animate’ keyframes to animate all characters. In the ‘animate’ keyframes, we change the vertical position of the character.
Also, we used the ‘n-th-child()’ method to access all div elements one by one and set the animation delay. In the output, users can observe the bouncing loading text.
<html>
<head>
<style>
.char {
font-size: 44px;
color: blue;
display: inline-block;
transition: all 0.9s;
animation: animate 1.5s infinite;
}
.char:nth-child(1) {animation-delay: 0.1s;}
.char:nth-child(2) {animation-delay: 0.3s;}
.char:nth-child(3) {animation-delay: 0.4s;}
.char:nth-child(4) {animation-delay: 0.5s;}
.char:nth-child(5) {animation-delay: 0.6s;}
.char:nth-child(6) {animation-delay: 0.8s;}
.char:nth-child(7) {animation-delay: 0.9s;}
.char:nth-child(8) {animation-delay: 1s;}
.char:nth-child(9) {animation-delay: 1.2s;}
.char:nth-child(10) {animation-delay: 1.4s;}
@keyframes animate {
0% {transform: translateY(0);}
40% {transform: translateY(-20px);}
100% {transform: translateY(0);}
}
</style>
</head>
<body>
<h2>Creating the <i> Loading text animation using the CSS. </i> </h2>
<div class="allLetters">
<div class = "char"> L </div>
<div class = "char"> o </div>
<div class = "char"> a </div>
<div class = "char"> d </div>
<div class = "char"> i </div>
<div class = "char"> n </div>
<div class = "char"> g </div>
<div class = "char"> . </div>
<div class = "char"> . </div>
<div class = "char"> . </div>
</div>
</body>
</html>
Example 4
In the example below, we added the blur effect on the loading text. Here, we have added every character of the loading word in the separate ‘span’ element. After that, we access every span element one by one using the ‘n-th-child()’ CSS method to add animation. In the span element, we add ‘blur-text’ animation with a particular amount of animation delay.
In the animation keyframes, we apply the blur filter on the text to show a running blur effect on the loading text.
<html>
<head>
<style>
span {font-size: 2rem; color: green;}
/* adding blur animation effect on each character of loading text one by one */
span:nth-child(1){animation: blur-text 4s ease-in-out infinite;}
span:nth-child(2){animation: blur-text 4s ease-in-out infinite 0.3s;}
span:nth-child(3){animation: blur-text 4s ease-in-out infinite 0.5s;}
span:nth-child(4){animation: blur-text 4s ease-in-out infinite 0.9s;}
span:nth-child(5){animation: blur-text 4s ease-in-out infinite 1.3s;}
span:nth-child(6){animation: blur-text 4s ease-in-out infinite 1.6s;}
span:nth-child(7){animation: blur-text 4s ease-in-out infinite 2s;}
@keyframes blur-text {
0% {filter: blur(0px);}
50% {filter: blur(4px);}
100% {filter: blur(0px);}
}
</style>
</head>
<body>
<h2>Creating the <i> Loading text animation using the CSS. </i> </h2>
<div class = "allLetters">
<span> L </span>
<span> O </span>
<span> A </span>
<span> D </span>
<span> I </span>
<span> N </span>
<span> G </span>
</div>
</body>
</html>
Users learned 4 different types of loading animations in this tutorial. In the first example, we created the rotating loading indicator with text. In the second example, we created the loading bar. Furthermore, in the third example, we created bouncing loading text, and in the final example, we added a blur effect to the text.
734 Views
