In web development, providing visual feedback to users during loading processes is essential for a smooth and engaging user experience. One effective way to achieve this is by using CSS animations to create loading spinners or progress indicators. In this tutorial, we’ll walk through the process of creating a simple loading animation using CSS.
HTML Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Creative Page Loading Animation</title>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="loader">
<span>L</span>
<span>o</span>
<span>a</span>
<span>d</span>
<span>i</span>
<span>n</span>
<span>g</span>
<span>.</span>
<span>.</span>
<span>.</span>
</div>
</div>
</body>
</html>CSS Styles
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #000;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100px;
}
.loader {
font-size: 40px;
font-weight: bold;
display: inline-block;
font-family: bebas neue;
}
.loader span {
display: inline-block;
color: #0072ff;
animation: bounce 1.5s infinite alternate;
}
.loader span:nth-child(2) {
animation-delay: 0.1s;
}
.loader span:nth-child(3) {
animation-delay: 0.2s;
}
.loader span:nth-child(4) {
animation-delay: 0.3s;
}
.loader span:nth-child(5) {
animation-delay: 0.4s;
}
.loader span:nth-child(6) {
animation-delay: 0.5s;
}
.loader span:nth-child(7) {
animation-delay: 0.6s;
}
.loader span:nth-child(8) {
animation-delay: 0.7s;
}
.loader span:nth-child(9) {
animation-delay: 0.8s
}
.loader span:nth-child(10) {
animation-delay: 0.9s;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0)
}
40% {
transform: translateY(-50px)
}
60% {
transform: translateY(-25px);
}
}Output:-
Hopefully, It will help you …!!!