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; }
}

Comments and Discussions!

Load comments ↻





Copyright © 2024 www.includehelp.com. All rights reserved.