How To Create Three Dots Loading Animation

In this topic,

We are going to see how to create three dot loading animation.

Step-1: Create Html Code in the index.html file.

<div class="loader-button">
  <span class="loader__dot"></span>
  <span class="loader__dot"></span>
  <span class="loader__dot"></span>
</div>

Step-2: Add CSS Code in the <style>…</style> on index.html file.

:root {
  --main-color: #ecf0f1;
  --point-color: #555;
  --size: 5px;
}

.loader-button {
  background-color: var(--main-color);
  overflow: hidden;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0; left: 0;
  display: flex;
  align-items: center;
  align-content: center; 
  justify-content: center;  
  z-index: 100000;
}

.loader__dot {
  border-radius: 100%;
  border: var(--size) solid var(--point-color);
  margin: calc(var(--size)*2);
}

.loader__dot:nth-child(1) {
  animation: preloader .6s ease-in-out alternate infinite;
}
.loader__dot:nth-child(2) {
  animation: preloader .6s ease-in-out alternate .2s infinite;
}

.loader__dot:nth-child(3) {
  animation: preloader .6s ease-in-out alternate .4s infinite;
}

@keyframes preloader {
  100% { transform: scale(2); }
}

Review the below video.