:root{
  --dot-size: 7px;
  --animation-duration: 1.7s;
  --translation-needed: calc(var(--dot-size) * 3);
}

.dot {
  display: inline-block;
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: 50%;
  background-color: white;
  transform: translateY(var(--translation-needed));
  margin: 0 2px;
}

.dot_1 {
  animation: bounce var(--animation-duration) infinite;
}

.dot_2 {
  animation: bounce var(--animation-duration) infinite;
  animation-delay: 0.2s
}

.dot_3 {
  animation: bounce var(--animation-duration) infinite;
  animation-delay: 0.4s;
}


@keyframes bounce {
  0%, 50%, 100% {
    transform: translateY(var(--translation-needed));
  }
  25%, 75% {
    transform: translateY(calc(var(--translation-needed) - var(--dot-size)));
  }
}