SOURCE

<div class="loading">
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
</div>

*{
  margin: 0;
  padding: 0;
}
.loading{
  margin: 150px auto 0;
  display: flex;
}
.circle{
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #FF5E4C;
  animation: mymove 300ms infinite alternate;
  margin-right: 20px;
}
.circle:nth-child(1) {
  /* animation-delay: 5s; */
  animation-delay: 300ms;
}
.circle:nth-child(2) {
  /* animation-delay: 5s; */
  animation-delay: -350ms;
}
.circle:nth-child(3) {
  /* animation-delay: 5s; */
  animation-delay: -400ms;
}
.circle:nth-child(4) {
  /* animation-delay: 5s; */
  animation-delay: -450ms;
}
.circle:nth-child(5) {
  /* animation-delay: 5s; */
  animation-delay: -500ms;
}
.circle:nth-child(6) {
  /* animation-delay: 5s; */
  animation-delay: -550ms;
}
@keyframes mymove
{
  0% {transform: translateY(0)}
  100% {transform: translateY(-100px)}
}