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

</div>

body {
  display:flex;
  justify-content:center;
  margin-top:5rem;  
}

.container{
  background-color:#eee;
  padding: 1.5rem 0.8rem 0.8rem 0.8rem;
  border-radius:5px;
}
.dot {
  display: inline-block;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: #4b9cdb;
}


.container .dot:nth-last-child(1) {
  animation: jumpingAnimation 1.2s 0.6s linear infinite;
}
.container .dot:nth-last-child(2) {
  animation: jumpingAnimation 1.2s 0.3s linear infinite;
}
.container .dot:nth-last-child(3) {
  animation: jumpingAnimation 1.2s 0s linear infinite;
}

@keyframes jumpingAnimation {
  0 {
    transform: translate(0, 0);
  }
  16% {
    transform: translate(0, -15px);
  }
  33% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}