Google-Style 4-Dot Bounce Loading Indicator with Pure CSS/CSS3

A lightweight, pure CSS/CSS3 loading indicator that replicates the smooth, four-dot loading animation as you’ve seen in Google’s UI.

The animation uses CSS3 keyframes and transform properties to create smooth vertical movement across four colored dots, each with carefully timed delays that produce the characteristic wave-like motion.

See it in action:

How to use it:

1. Place four div elements with the class .dot inside a container.

<div class="loader-container">
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>

2. Apply the core CSS animation styles:

.dot {
  height: 20px;
  width: 20px;
  background-color: #008ae6;
  display: block;
  margin: 7px;
  border-radius: 50%;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  animation: animate 0.6s ease-in-out infinite alternate;
}
.dot:nth-child(1) {
  animation-delay: -0.25s;
}
.dot:nth-child(2) {
  animation-delay: -0.5s;
  background: #e60000;
}
.dot:nth-child(3) {
  animation-delay: -0.75s;
  background: #ffcc00;
}
.dot:nth-child(4) {
  animation-delay: -1s;
  background: #008800;
}
@keyframes animate {
  0% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(5px);
  }
}

3. Modify the animation speed by adjusting the animation duration:

.dot {
  animation: animate 0.8s ease-in-out infinite alternate; /* Slower animation */
}

4. Change dot sizes and spacing:

.dot {
  height: 16px;
  width: 16px;
  margin: 5px;
}

5. Create monochrome versions by using a single color:

.dot {
  background-color: #4285f4; /* Google Blue */
}
.dot:nth-child(2),
.dot:nth-child(3),
.dot:nth-child(4) {
  background: #4285f4;
}

6. Best Practice: Wrap the dots in a flex container to center them:

.loader-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

More Resources:

• 10 Best Lazy Loading JavaScript and jQuery Plugins