client/src/components/busy-spinner/busy-spinner.scss

@import '../../style/palette';

:host {
  display: block;
  height: 65px;
  width: 65px;
  position: relative;
  box-sizing: border-box;

  > * {
    box-sizing: border-box;
    height: 13.3%;
    width: 13.3%;
    animation-duration: 2000ms;
    top: 43.333%;
    left: 43.333%;
    position: absolute;
    animation-iteration-count: infinite;
    border-radius: 50%;
  }

  :nth-child(2n+0) {
    margin-right: 0;
  }

  @for $i from 1 through 8 {
    > *:nth-child(#{$i}) {
      animation-name: busy-spinner-animation-child-#{$i};
      animation-delay: calc(100ms * #{$i});
      background-color: nth($theme-colors, $i % length($theme-colors) + 1);
    }
  }

  > *:nth-child(9) {
    height: calc(65px / 3);
    width: calc(65px / 3);
    animation-duration: 2000ms;
    top: calc(65px / 3);
    left: calc(65px / 3);
    background-color: nth($theme-colors, 1);
    animation: busy-spinner-animation-child-big 2s infinite;
    animation-delay: 0.5s;
  }
}

$sqrt-2: 1.414;
$child-base-distance: 325%;
$child-distance: calc($child-base-distance * $sqrt-2);
$child-diagonal-distance: calc($child-base-distance / $sqrt-2);

@keyframes busy-spinner-animation-child-1 {
  50% {
    transform: translate(0, -$child-distance);
  }
}

@keyframes busy-spinner-animation-child-2 {
  50% {
    transform: translate($child-diagonal-distance, -$child-diagonal-distance);
  }
}

@keyframes busy-spinner-animation-child-3 {
  50% {
    transform: translate($child-distance, 0);
  }
}

@keyframes busy-spinner-animation-child-4 {
  50% {
    transform: translate($child-diagonal-distance, $child-diagonal-distance);
  }
}

@keyframes busy-spinner-animation-child-5 {
  50% {
    transform: translate(0, $child-distance);
  }
}

@keyframes busy-spinner-animation-child-6 {
  50% {
    transform: translate(-$child-diagonal-distance, $child-diagonal-distance);
  }
}

@keyframes busy-spinner-animation-child-7 {
  50% {
    transform: translate(-$child-distance, 0);
  }
}

@keyframes busy-spinner-animation-child-8 {
  50% {
    transform: translate(-$child-diagonal-distance, -$child-diagonal-distance);
  }
}

@keyframes busy-spinner-animation-child-big {
  50% {
    transform: scale(0.5);
  }
}