Loading Indicator: Default (Example)

$circle1-width: 8px;
$circle2-width: 16px;
$circle3-width: 20px;

@keyframes circles {
  0% {  }
  25% {  }
  50% { transform: rotate(360deg); }
  100% {  }
}


@keyframes circle1 {
  50% { top: $circle1-width / 2; left: 36px + $circle1-width / 2;  }
}

@keyframes circle2 {
  50% { top: 8px + $circle1-width / 2; left: $circle1-width / 2; }
}

@keyframes circle3 {
  50% { top: 32px + $circle1-width / 2; left: 32px + $circle1-width / 2; }
}



.loadingindicator {
  display: flex;
  justify-content: center;

  .loadingindicator-x-circles {
    animation: circles 1s infinite;
    flex: 0 0 auto;
    position: relative;
    width: $gridspacing * 6.5; // 52px;
    height: $gridspacing * 6.5; // 52px;
  }

  .loadingindicator-x-allcircles {
    border-radius: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .loadingindicator-x-circle1 {
    animation: circle1 1s infinite;
    @extend .loadingindicator-x-allcircles;
    width: $gridspacing;
    height: $gridspacing;
    background: $color-accent5;
  }

  .loadingindicator-x-circle2 {
    animation: circle2 1s infinite;
    @extend .loadingindicator-x-allcircles;
    width: $gridspacing * 2;
    height: $gridspacing * 2;
    background: $color-accent2;
  }

  .loadingindicator-x-circle3 {
    animation: circle3 1s infinite;
    @extend .loadingindicator-x-allcircles;
    width: $gridspacing * 2.5;
    height: $gridspacing * 2.5;
    background: $color-accent3;
  }
}