:root {
  --color-primary: #3ad4a7;
  --loader-color: var(--color-primary);
  --spinner-overlay-bgcolor: rgba(#fff, 0.7);
  --animation-duration: 1.5s;
  --loader-size: 3rem;
}

.spinner {
  z-index: 5;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.dot {
  display: inline-flex;
  width: 30%;
  height: 30%;
  border-radius: 100%;
  background-color: var(--loader-color);
  animation: three var(--animation-duration) infinite ease-in-out both;
}

.threes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: var(--loader-size);
  height: var(--loader-size);
}

.threes_three {
  animation-delay: -320ms;
}

.threes_three_1 {
  animation-delay: -160ms;
}

@keyframes three {
  0%,
  80%,
  100% {
    transform: scale(0);
  }

  40% {
    transform: scale(1);
  }
}