Back
Crafting a Dynamic Dots Loader for Seamless User Experience
Unveil the steps to create a visually appealing and responsive loading animation using simple HTML and CSS.
HTML
To create a Dynamic Dots Loader, we start by defining a container that will host our loading animation. It contains three dots, each represented by a div element. Each dot will have a specific class to help us animate them independently.
<div class="loader-container">
<div class="dot dot1"></div>
<div class="dot dot2"></div>
<div class="dot dot3"></div>
</div>
CSS
For CSS, we will first style the loader container, ensuring it's perfectly centered both vertically and horizontally. We achieve this using the flexbox model by setting 'justify-content' and 'align-items' to 'center'. The height of the container is set to 100vh to make it full screen, providing a centered loading animation on any size screen.
.loader-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
The dots themselves are styled with a fixed size and color. They are circular, achieved by setting a 'border-radius' of 50%. Their animation is a simple bouncing effect, implemented using CSS keyframes. The colors and sizes can easily be customized to fit different design needs.
.dot {
width: 15px;
height: 15px;
border-radius: 50%;
background-color: #3498db;
margin: 0 5px;
animation: bounce 1.5s infinite ease-in-out;
}
Each dot has an animation delay, making them bounce in sequence rather than all at once. This effect is accomplished by using different 'animation-delay' values. This subtle trick gives the loader a dynamic and engaging look.
.dot1 { animation-delay: 0s; }
.dot2 { animation-delay: 0.3s; }
.dot3 { animation-delay: 0.6s; }
@keyframes bounce {
0%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-20px);
}
}
This loader is a simple, yet effective design pattern using minimal HTML and CSS. No JavaScript is needed, enabling faster performance and responsiveness. By adjusting the CSS properties, you can easily tailor this loader to fit any website's requirements.
Visual Demo
Whole code
<div class="loader-container">
<div class="dot dot1"></div>
<div class="dot dot2"></div>
<div class="dot dot3"></div>
</div>
<style>
.loader-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.dot {
width: 15px;
height: 15px;
border-radius: 50%;
background-color: #3498db;
margin: 0 5px;
animation: bounce 1.5s infinite ease-in-out;
}
.dot1 { animation-delay: 0s; }
.dot2 { animation-delay: 0.3s; }
.dot3 { animation-delay: 0.6s; }
@keyframes bounce {
0%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-20px);
}
}
</style>
Thank you for reading this article.
Comments