Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Loading Text Animation Effect using CSS
Loading text animations are essential for providing visual feedback to users while content loads. They improve user experience by indicating that something is happening in the background and keep users engaged during wait times.
In this tutorial, we will learn to create different types of loading text animations using HTML and CSS. These animations are lightweight, smooth, and don't require JavaScript libraries.
Syntax
@keyframes animationName {
0% { /* starting properties */ }
50% { /* mid-point properties */ }
100% { /* ending properties */ }
}
selector {
animation: animationName duration timing-function iteration-count;
}
Example 1: Rotating Loader with Text
In this example, we create a circular rotating loader with "Loading" text centered inside. The outer circle has a dotted border and the inner circle has a solid border, both rotating in opposite directions
<!DOCTYPE html>
<html>
<head>
<style>
.loader {
width: 100px;
height: 100px;
border-radius: 50%;
border: 6px dotted #4CAF50;
position: relative;
animation: rotation 2s linear infinite;
margin: 20px auto;
}
.loader-inner {
position: absolute;
width: 70px;
height: 70px;
border-radius: 50%;
border-top: 6px solid #FF9800;
border-bottom: 6px solid #FF9800;
top: 10px;
left: 10px;
animation: rotation-inner 2s linear infinite reverse;
}
.loader-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 12px;
font-weight: bold;
color: #333;
}
@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>Rotating Loader Animation</h2>
<div class="loader">
<div class="loader-inner"></div>
<div class="loader-text">Loading</div>
</div>
</body>
</html>
A circular loading spinner with green dotted outer border and orange inner border rotating in opposite directions, with "Loading" text centered in the middle.
Example 2: Progress Bar Animation
This example creates a horizontal loading bar that fills and empties continuously
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 300px;
margin: 20px auto;
text-align: center;
}
.loader {
width: 100%;
height: 20px;
border: 2px solid #2196F3;
border-radius: 10px;
overflow: hidden;
background-color: #f0f0f0;
}
.bar {
width: 0%;
height: 100%;
background: linear-gradient(90deg, #4CAF50, #8BC34A);
animation: bar-animation 3s ease-in-out infinite;
}
.loading-text {
margin-top: 10px;
font-size: 18px;
color: #4CAF50;
font-weight: bold;
}
@keyframes bar-animation {
0% { width: 0%; }
50% { width: 100%; }
100% { width: 0%; }
}
</style>
</head>
<body>
<h2>Progress Bar Loading Animation</h2>
<div class="container">
<div class="loader">
<div class="bar"></div>
</div>
<div class="loading-text">Loading...</div>
</div>
</body>
</html>
A horizontal progress bar with blue border that fills with green gradient from left to right, then empties, repeating continuously. "Loading..." text appears below the bar.
Example 3: Bouncing Text Animation
This example creates individual characters that bounce up and down with staggered timing
<!DOCTYPE html>
<html>
<head>
<style>
.loading-container {
text-align: center;
margin: 50px auto;
}
.char {
font-size: 36px;
color: #E91E63;
display: inline-block;
font-weight: bold;
animation: bounce 1.4s infinite ease-in-out;
}
.char:nth-child(1) { animation-delay: 0.1s; }
.char:nth-child(2) { animation-delay: 0.2s; }
.char:nth-child(3) { animation-delay: 0.3s; }
.char:nth-child(4) { animation-delay: 0.4s; }
.char:nth-child(5) { animation-delay: 0.5s; }
.char:nth-child(6) { animation-delay: 0.6s; }
.char:nth-child(7) { animation-delay: 0.7s; }
@keyframes bounce {
0%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-30px);
}
}
</style>
</head>
<body>
<h2>Bouncing Text Animation</h2>
<div class="loading-container">
<span class="char">L</span>
<span class="char">O</span>
<span class="char">A</span>
<span class="char">D</span>
<span class="char">I</span>
<span class="char">N</span>
<span class="char">G</span>
</div>
</body>
</html>
The word "LOADING" in pink letters where each character bounces up and down individually with a wave-like effect from left to right.
Example 4: Blur Effect Animation
This example applies a blur filter effect to each character sequentially, creating a wave-like blur animation
<!DOCTYPE html>
<html>
<head>
<style>
.blur-container {
text-align: center;
margin: 50px auto;
}
.blur-char {
font-size: 32px;
color: #673AB7;
font-weight: bold;
display: inline-block;
}
.blur-char:nth-child(1) { animation: blur-text 2s ease-in-out infinite 0.1s; }
.blur-char:nth-child(2) { animation: blur-text 2s ease-in-out infinite 0.3s; }
.blur-char:nth-child(3) { animation: blur-text 2s ease-in-out infinite 0.5s; }
.blur-char:nth-child(4) { animation: blur-text 2s ease-in-out infinite 0.7s; }
.blur-char:nth-child(5) { animation: blur-text 2s ease-in-out infinite 0.9s; }
.blur-char:nth-child(6) { animation: blur-text 2s ease-in-out infinite 1.1s; }
.blur-char:nth-child(7) { animation: blur-text 2s ease-in-out infinite 1.3s; }
@keyframes blur-text {
0% { filter: blur(0px); opacity: 1; }
50% { filter: blur(3px); opacity: 0.7; }
100% { filter: blur(0px); opacity: 1; }
}
</style>
</head>
<body>
<h2>Blur Effect Text Animation</h2>
<div class="blur-container">
<span class="blur-char">L</span>
<span class="blur-char">O</span>
<span class="blur-char">A</span>
<span class="blur-char">D</span>
<span class="blur-char">I</span>
<span class="blur-char">N</span>
<span class="blur-char">G</span>
</div>
</body>
</html>
The word "LOADING" in purple letters where each character becomes blurred and slightly transparent in sequence, creating a wave-like blur effect across the text.
Conclusion
These CSS loading animations provide different visual styles to enhance user experience during content loading. Each technique uses keyframes and animation properties to create smooth, engaging effects without requiring JavaScript.
Updated on: 2026-03-15T17:13:06+05:30
2K+ Views
Advertisements