<div class="loader">
  <div class="loader__ball"></div>
  <div class="loader__ball"></div>
  <div class="loader__ball"></div>
</div>

$dotColor: #FFFFFF;
$bgColor: #69C2A3;
$dotSize: 1.75rem;
$duration: 2.5s;

html,
body {
  margin: 0;
  height: 100%;
}

body {
  background: $bgColor;
  display: grid;
  place-content: center;
}

.loader {
  animation: rotate $duration linear infinite normal;
  position: relative;
  transform-origin: 50% 50%;

  &__ball {
    height: $dotSize;
    left: -$dotSize / 2;
    position: absolute;
    top: -$dotSize / 2;
    transform-origin: 50% 50%;
    width: $dotSize;

    &:nth-of-type(2) {
      transform: rotate(120deg);
    }

    &:nth-of-type(3) {
      transform: rotate(240deg);
    }

    &::after {
      animation: moveAndScale $duration / 2 ease-in-out infinite alternate;
      background-color: $dotColor;
      border-radius: 50%;
      content: "";
      display: inline-block;
      height: 100%;
      width: 100%;
      transform-origin: 50% 50%;
    }
  }
}

@keyframes rotate {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes moveAndScale {
  0%, 15% {
    transform: translateY(0) scale(0.65);
  }
  100% {
    transform: translateY(-150%) scale(1);
  }
}