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>

*{
  margin: 0;
  padding: 0;
}
.loading{
  margin: 150px auto 0;
  background: #000;
  text-align: center;
  display: flex;
}
.circle{
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #FF5E4C;
  animation: mymove 500ms infinite alternate;
  margin-right: 20px;
}
.circle:nth-child(1) {
  /* animation-delay: 5s; */
  animation-delay: 0ms;
}
.circle:nth-child(2) {
  /* animation-delay: 5s; */
  animation-delay: 700ms;
}
.circle:nth-child(3) {
  /* animation-delay: 5s; */
  animation-delay: 1400ms;
}
.circle:nth-child(4) {
  /* animation-delay: 5s; */
  animation-delay: 2100ms;
}
.circle:nth-child(5) {
  /* animation-delay: 5s; */
  animation-delay: 2800ms;
}

@keyframes mymove
{
  0% {transform: translateY(0)}
  100% {transform: translateY(-100px)}
}