<div class="loading">
  <div></div>
  <div></div>
  <div></div>
</div>
body {
  background: black;
  display: flex;
  width: 100%;
  height: 100vh;
  align-items: center;
  justify-content: center;
}

.loading {
  display: flex;
}

.loading div {
  width: 50px;
  height: 50px;
  background: red;
  border-radius: 50%;
  margin-left: 15px;
  
  animation: move 1s ease-in-out infinite alternate;
}

.loading div:nth-child(1) {
  animation-delay: -0.4s;
}

.loading div:nth-child(2) {
  animation-delay: -0.2s;
}

@keyframes move {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(100%);
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.