CSS loading animation

Loading animations are a very common requirement in web development. They can make users feel more enjoyable and patient while waiting for a page to load. In this article, we’ll introduce some common CSS loading animation effects and provide corresponding sample code.

1. Spinning Animation

Spinning animation is a simple and common loading animation effect. Using the CSS @keyframes rule, we can create a simple spinning loading animation.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Rotation Animation</title> 
<style> 
.loader { 
border: 16px solid #f3f3f3; /* Light gray */ 
border-top: 16px solid #3498db; /* Blue */ 
border-radius: 50%; 
width: 120px; 
height: 120px; 
animation: spin 2s linear infinite; 
} 

@keyframes spin { 
0% { transform: rotate(0deg); } 
100% { transform: rotate(360deg); } 
} 
</style> 
</head> 
<body> 

<h2>Rotation Animation</h2> 

<div class="loader"></div> 

</body> 
</html>

Output:

CSS Loading Animation

In the example code above, we create a loading animation with a spinning effect. As the page loads, the blue circle will continuously rotate, creating a loading animation effect.

2. Jumping Animation

Jumping animation is another common loading animation effect. Using the CSS @keyframes rule, we can create a simple jumping loading animation.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Bounce Animation</title> 
<style> 
.loader { 
width: 100px; 
height: 100px; 
background-color: #3498db; 
border-radius: 50%; 
animation: bounce 2s infinite; 
} 

@keyframes bounce { 
0%, 20%, 50%, 80%, 100% { 
transform: translateY(0); 
} 
40% { 
transform: translateY(-30px); 
} 60% {
transform: translateY(-15px);
}
}
</style>
</head>
<body>

<h2>Bounce Animation</h2>

<div class="loader"></div>

</body>
</html>

Output:

CSS Loading Animation

In the example code above, we create a loading animation with a bounce effect. When the page loads, the blue circle will bounce up and down continuously, creating a loading animation effect.

3. Gradient Animation

Gradient animation is a cool loading animation effect. By using the CSS @keyframes rule and the linear-gradient property, we can implement a loading animation with a gradient effect.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Gradient Animation</title> 
<style> 
.loader { 
width: 100px; 
height: 100px; 
background: linear-gradient(45deg, #3498db, #f39c12, #e74c3c, #9b59b6); 
background-size: 400% 400%; 
animation: gradient 3s infinite; 
} 

@keyframes gradient { 
0% { 
background-position: 0% 50%; }
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
</style>
</head>
<body>

<h2>Gradient Animation</h2>

<div class="loader"></div>

</body>
</html>

Output:

CSS Loading Animation

In the example code above, we create a loading animation with a gradient effect. As the page loads, the background color will gradually change, creating a cool loading animation effect.

4. Zoom Animation

Zoom animation is a simple and common loading animation effect. Using the CSS @keyframes rule, we can create a simple zoom loading animation.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Scale Animation</title> 
<style> 
.loader { 
width: 100px; 
height: 100px; 
background-color: #3498db; 
border-radius: 50%; 
animation: scale 2s infinite alternate; 
} 

@keyframes scale { 
0% { 
transform: scale(1); 
} 
100% { 
transform: scale(1.5); } 
} 
</style> 
</head> 
<body> 

<h2>Scale Animation</h2> 

<div class="loader"></div> 

</body> 
</html>

Output:

CSS Loading Animation

In the example code above, we create a loading animation with a zooming effect. As the page loads, the blue circle will continuously zoom, creating a loading animation effect.

5. Flashing Animation

Flashing animation is a cool loading animation effect. Using the CSS @keyframes rule, we can create a loading animation with a flashing effect.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Blink Animation</title> 
<style> 
.loader { 
width: 100px; 
height: 100px; 
background-color: #3498db; 
animation: blink 1s infinite alternate; 
} 

@keyframes blink { 
0% { 
opacity: 1; 
} 
100% { 
opacity: 0; 
} 
} 
</style> 
</head> 
<body> 

<h2>Blink Animation</h2>

<div class="loader"></div>

</body>

</html>

Output:

CSS Loading Animation

In the example code above, we create a loading animation with a flashing effect. When the page loads, the blue circle will flash continuously, creating a loading animation effect.

6. Flip Animation

Flip animation is a cool loading animation effect. Using the CSS @keyframes rule, we can create a loading animation with a flipping effect.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Flip Animation</title> 
<style> 
.loader { 
width: 100px; 
height: 100px; 
background-color: #3498db; 
animation: flip 2s infinite; 
} 

@keyframes flip { 
0% { 
transform: rotateY(0deg); 
} 
50% { 
transform: rotateY(180deg); 
} 
100% { 
transform: rotateY(360deg); } 
} 
</style> 
</head> 
<body> 

<h2>Flip Animation</h2> 

<div class="loader"></div> 

</body> 
</html>

Output:

CSS Loading Animation

In the example code above, we create a loading animation with a flip effect. When the page loads, the blue circle will flip continuously, creating a loading animation effect.

7. Bounce Animation

Bounce animation is a more interesting loading animation effect. By using the CSS @keyframes rule, we can implement a loading animation with a bouncing effect.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Bounce Animation</title> 
<style> 
.loader { 
width: 100px; 
height: 100px; 
background-color: #3498db; 
border-radius: 50%; 
animation: bounce 2s infinite; 
} 

@keyframes bounce { 
0%, 20%, 50%, 80%, 100% { 
transform: translateY(0); 
} 
40% { 
transform: translateY(-30px); 
} 60% {
transform: translateY(-15px);
}
}
</style>
</head>
<body>

<h2>Bounce Animation</h2>

<div class="loader"></div>

</body>
</html>

Output:

CSS Loading Animation

In the example code above, we create a loading animation with a bouncing effect. When the page loads, the blue circle will bounce up and down continuously, creating a loading animation effect.

8. Rotation and Scale Animation

Rotation and scale animation is a cool loading animation effect. Using the CSS @keyframes rule, we can create a loading animation with rotation and scale effects.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Rotate Scale Animation</title> 
<style> 
.loader { 
width: 100px; 
height: 100px; 
background-color: #3498db; 
border-radius: 50%; 
animation: rotate-scale 2s infinite; 
} 

@keyframes rotate-scale { 
0% { 
transform: rotate(0deg) scale(1); 
} 
50% { 
transform: rotate(180deg) scale(1.5); } 
100% { 
transform: rotate(360deg) scale(1); 
} 
} 
</style> 
</head> 
<body> 

<h2>Rotate Scale Animation</h2> 

<div class="loader"></div> 

</body> 
</html>

Output:

CSS Loading Animation

In the example code above, we create a loading animation with rotation and scaling effects. When the page loads, the blue circle will continuously rotate and scale, forming a loading animation effect.

9. Color Change Animation

Color change animation is a cool loading animation effect. Using the CSS @keyframes rule and the linear-gradient property, we can create a loading animation with a color change effect.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Color Change Animation</title> 
<style> 
.loader { 
width: 100px; 
height: 100px; 
background: linear-gradient(45deg, #3498db, #f39c12, #e74c3c, #9b59b6); 
background-size: 400% 400%; 
animation: color-change 3s infinite; 
} 

@keyframes color-change { 
0% { 
background-position: 0% 50%; 
} 
50% { 
background-position: 100% 50%; 
} 
100% { 
background-position: 0% 50%; 
} 
} 
</style> 
</head> 
<body> 

<h2>Color Change Animation</h2> 

<div class="loader"></div> 

</body> 
</html>

Output:

CSS Loading Animation

In the example code above, we create a loading animation with a color change effect. As the page loads, the background color will continuously change, creating a cool loading animation effect.

10. Distort Animation

Distort animation is a fun loading animation effect. Using the CSS @keyframes rule, we can create a loading animation with a distorted effect.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Distort Animation</title> 
<style> 
.loader { 
width: 100px; 
height: 100px; 
background-color: #3498db; 
border-radius: 50%; 
animation: distort 2s infinite alternate; 
} 

@keyframes distort { 
0% { 
transform: skewX(0deg); 
} 
100% { 
transform: skewX(30deg); } 
} 
</style> 
</head> 
<body> 

<h2>Distort Animation</h2> 

<div class="loader"></div> 

</body> 
</html>

Output:

CSS Loading Animation

In the example code above, we create a loading animation with a distortion effect. As the page loads, the blue circle will continuously distort, creating a loading animation effect.

Through the sample code above, we’ve introduced some common CSS loading animation effects, including rotation, bounce, gradient, zoom, flash, flip, bounce, rotation and zoom, color change, and twist. These loading animation effects can help add dynamic and interesting elements to web pages and enhance the user experience.