Home »
HTML
CSS Three Dots Loading Animations
By IncludeHelp Last updated : October 30, 2024
Here you will find some of the three-dot loading animations that you can use and customize as per your website theme and requirements. These animations are useful to display the loading process on the webpage. Each loading animation has its own showcase, HTML code, and CSS code; you can simply copy and use these codes to improve your webpage design.
Three Dot Animation: Flashing
Three-dot flushing loading animation displays the dots flashing, and it creates such a beautiful pulsing effect. Use the following CSS and HTML codes to display this effect:
HTML Code
<div class="dots">
<div style="animation: dotFlashing 1s infinite ease-in-out;"></div>
<div style="animation: dotFlashing 1s infinite ease-in-out 0.2s;"></div>
<div style="animation: dotFlashing 1s infinite ease-in-out 0.4s;"></div>
</div>
CSS Code
.dots {
display: inline-flex;
}
.dots div {
width: 8px;
height: 8px;
margin: 0 5px;
background-color: #006969;
border-radius: 50%;
}
@keyframes dotFlashing {
0%, 80%, 100% { opacity: 0; }
40% { opacity: 1; }
}
Three Dot Animation: Scaling
Three-dots grow in size loading animation displays the dots expand and contract. Use the following CSS and HTML codes to display this effect:
HTML Code
<div class="dots">
<div style="animation: dotGrowing 1s infinite ease-in-out;"></div>
<div style="animation: dotGrowing 1s infinite ease-in-out 0.2s;"></div>
<div style="animation: dotGrowing 1s infinite ease-in-out 0.4s;"></div>
</div>
CSS Code
.dots {
display: inline-flex;
}
.dots div {
width: 8px;
height: 8px;
margin: 0 5px;
background-color: #006969;
border-radius: 50%;
}
@keyframes dotGrowing {
0%, 80%, 100% { transform: scale(1); }
40% { transform: scale(1.5); }
}
Three Dot Animation: Color Change
Three-dot color-changing loading animation shows the dots changing their colors to show the loading process. Use the following CSS and HTML codes to display this effect:
HTML Code
<div class="dots">
<div style="animation: dotColorChange 1s infinite;"></div>
<div style="animation: dotColorChange 1s infinite 0.2s;"></div>
<div style="animation: dotColorChange 1s infinite 0.4s;"></div>
</div>
CSS Code
.dots {
display: inline-flex;
}
.dots div {
width: 8px;
height: 8px;
margin: 0 5px;
background-color: #006969;
border-radius: 50%;
}
@keyframes dotColorChange {
0%, 100% { background-color: #006969; }
50% { background-color: #00a1a1; }
}
Three Dot Animation 4: Horizontal Move
Three dots move horizontally loading animation shows the dots sliding horizontally (or bouncing horizontally) to show an amazing loading effect. Use the following CSS and HTML codes to display this effect:
HTML Code
<div class="dots">
<div style="animation: dotMove 1s infinite;"></div>
<div style="animation: dotMove 1s infinite 0.2s;"></div>
<div style="animation: dotMove 1s infinite 0.4s;"></div>
</div>
CSS Code
.dots {
display: inline-flex;
}
.dots div {
width: 8px;
height: 8px;
margin: 0 5px;
background-color: #006969;
border-radius: 50%;
}
@keyframes dotMove {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(10px); }
}
Three Dot Animation 5: Fade In and Out
Three-dot fade-in and fade-out loading animation shows the dots fade in and out; it also gives an amazing pulsing loading animation effect. Use the following CSS and HTML codes to display this effect:
HTML Code
<div class="dots">
<div style="animation: dotFlashing 1.5s infinite;"></div>
<div style="animation: dotFlashing 1.5s infinite 0.5s;"></div>
<div style="animation: dotFlashing 1.5s infinite 1s;"></div>
</div>
CSS Code
.dots {
display: inline-flex;
}
.dots div {
width: 8px;
height: 8px;
margin: 0 5px;
background-color: #006969;
border-radius: 50%;
}
@keyframes dotFlashing {
0%, 80%, 100% { opacity: 0; }
40% { opacity: 1; }
}