@keyframes firstLoadingCircle {
  0% { transform: translateX(0); }
  6.25% { transform: translateX(64px); }
  12.5% { transform: translateX(0); }
  100% { transform: translateX(0); }
}
@keyframes secondLoadingCircle {
  0% { transform: translateX(0); }
  12.5% { transform: translateX(0); }
  18.75% { transform: translateX(-64px); }
  93.75% { transform: translateX(-64px); }
  100% { transform: translateX(0); }
}
@keyframes thirdLoadingCircle {
  0% { transform: translateY(0); }
  18.75% { transform: translateY(0px); }
  25% { transform: translateY(-64px); }
  87.5% { transform: translateY(-64px); }
  93.75% { transform: translateY(0); }
  100% { transform: translateY(0); }
}
@keyframes fourthLoadingCircle {
  0% { transform: translateX(0); }
  25% { transform: translateX(0); }
  31.25% { transform: translateX(64px); }
  81.25% { transform: translateX(64px); }
  87.5% { transform: translateX(0); }
  100% { transform: translateX(0); }
}
@keyframes fifthLoadingCircle {
  0% { transform: translateX(0); }
  31.25% { transform: translateX(0); }
  37.5% { transform: translateX(64px); }
  75% { transform: translateX(64px); }
  81.25% { transform: translateX(0); }
  100% { transform: translateX(0); }
}
@keyframes sixthLoadingCircle {
  0% { transform: translateY(0); }
  37.5% { transform: translateY(0); }
  43.75% { transform: translateY(-64px); }
  68.75% { transform: translateY(-64px); }
  75% { transform: translateY(0); }
  100% { transform: translateY(0); }
}
@keyframes seventhLoadingCircle {
  0% { transform: translateX(0); }
  43.75% { transform: translateX(0); }
  50% { transform: translateX(-64px); }
  62.5% { transform: translateX(-64px); }
  68.75% { transform: translateX(0); }
  100% { transform: translateX(0); }
}
@keyframes eighthLoadingCircle {
  0% { transform: translateX(0); }
  50% { transform: translateX(0); }
  56.25% { transform: translateX(-64px); }
  62.5% { transform: translateX(0); }
  100% { transform: translateX(0); }
}

.dots-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  height: 40px;
}

.dots-loading .dot {
  width: 10px;
  height: 10px;
  background: #fff;
  border-radius: 50%;
  display: inline-block;
  animation: dotGrow 1s infinite;
}

.dots-loading .dot:nth-child(2) {
  animation-delay: 0.25s;
}
.dots-loading .dot:nth-child(3) {
  animation-delay: 0.5s;
}

@keyframes dotGrow {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.25);
  }
}