Cool loading animation

HTML

<div class="preloader loading">
  <span class="slice"></span>
  <span class="slice"></span>
  <span class="slice"></span>
  <span class="slice"></span>
  <span class="slice"></span>
  <span class="slice"></span>
</div>

SCSS

@keyframes preload-show-1 {
  from {
    transform: rotateZ(60deg) rotateY(-90deg) rotateX(0deg);
    border-left-color: #9c2f2f;
  }
}

@keyframes preload-hide-1 {
  to {
    transform: rotateZ(60deg) rotateY(-90deg) rotateX(0deg);
    border-left-color: #9c2f2f;
  }
}

@keyframes preload-cycle-1 {
  5% {
    transform: rotateZ(60deg) rotateY(90deg) rotateX(0deg);
    border-left-color: #9c2f2f;
  }
  10%,
  75% {
    transform: rotateZ(60deg) rotateY(0) rotateX(0deg);
    border-left-color: #f7484e;
  }
  80%,
  100% {
    transform: rotateZ(60deg) rotateY(90deg) rotateX(0deg);
    border-left-color: #9c2f2f;
  }
}

@keyframes preload-show-2 {
  from {
    transform: rotateZ(120deg) rotateY(-90deg) rotateX(0deg);
    border-left-color: #9c2f2f;
  }
}

@keyframes preload-hide-2 {
  to {
    transform: rotateZ(120deg) rotateY(-90deg) rotateX(0deg);
    border-left-color: #9c2f2f;
  }
}

@keyframes preload-cycle-2 {
  10% {
    transform: rotateZ(120deg) rotateY(90deg) rotateX(0deg);
    border-left-color: #9c2f2f;
  }
  15%,
  70% {
    transform: rotateZ(120deg) rotateY(0) rotateX(0deg);
    border-left-color: #f7484e;
  }
  75%,
  100% {
    transform: rotateZ(120deg) rotateY(90deg) rotateX(0deg);
    border-left-color: #9c2f2f;
  }
}

@keyframes preload-show-3 {
  from {
    transform: rotateZ(180deg) rotateY(-90deg) rotateX(0deg);
    border-left-color: #9c2f2f;
  }
}

@keyframes preload-hide-3 {
  to {
    transform: rotateZ(180deg) rotateY(-90deg) rotateX(0deg);
    border-left-color: #9c2f2f;
  }
}

@keyframes preload-cycle-3 {
  15% {
    transform: rotateZ(180deg) rotateY(90deg) rotateX(0deg);
    border-left-color: #9c2f2f;
  }
  20%,
  65% {
    transform: rotateZ(180deg) rotateY(0) rotateX(0deg);
    border-left-color: #f7484e;
  }
  70%,
  100% {
    transform: rotateZ(180deg) rotateY(90deg) rotateX(0deg);
    border-left-color: #9c2f2f;
  }
}

@keyframes preload-show-4 {
  from {
    transform: rotateZ(240deg) rotateY(-90deg) rotateX(0deg);
   ...