As online interactions become more intricate, incorporating captivating loading animations has emerged as a strategic tool for engaging users during content retrieval processes. One captivating choice is the "CSS Loader: Three Dots Spin Loader." This article guides you through creating this dynamic loading spinner using CSS, whether you're an experienced developer or just starting out. Let's dive in and elevate your UI with this appealing animation!
Here we have a complete code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Three Blue Dots Spinner</title>
<style>
@keyframes dotSpin {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-8px);
}
}
.loader {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.dot {
width: 12px;
height: 12px;
margin: 0 4px;
border-radius: 50%;
background-color: blue;
animation: dotSpin 1.5s infinite ease-in-out;
}
.dot:nth-child(2) {
animation-delay: 0.2s;
}
.dot:nth-child(3) {
animation-delay: 0.4s;
}
</style>
</head>
<body>
<div class="loader">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</body>
</html>In this code, there are three blue dots created using the .dot class within a container with the .loader class. The dots are animated to create a spinning effect. You can adjust the colors, sizes, animation durations, and delays as needed. Save the HTML code in an .html file and the CSS code in a .css file in the same directory. When you open the HTML file in a web browser, you'll see the three blue dots spinner animation.
Output:
