<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>

@for $i from 1 through 6 {
  @keyframes preload-show-#{$i}{
    from{
      transform: rotateZ(60* $i + deg) rotateY(-90deg) rotateX(0deg);
      border-left-color: #9c2f2f;
    }
  }
  @keyframes preload-hide-#{$i}{
    to{
      transform: rotateZ(60* $i + deg) rotateY(-90deg) rotateX(0deg);
      border-left-color: #9c2f2f;
    }
  }

  @keyframes preload-cycle-#{$i}{
    
    $startIndex: $i*5;
    $reverseIndex: (80 - $i*5);

    #{$startIndex * 1%}{
      transform: rotateZ(60* $i + deg) rotateY(90deg) rotateX(0deg);
      border-left-color: #9c2f2f;
    }
    #{$startIndex + 5%},
    #{$reverseIndex * 1%}{
      transform: rotateZ(60* $i + deg) rotateY(0) rotateX(0deg);
      border-left-color: #f7484e;
    }

    #{$reverseIndex + 5%},
    100%{
      transform: rotateZ(60* $i + deg) rotateY(90deg) rotateX(0deg);
      border-left-color: #9c2f2f;
    }
  }
}

@keyframes preload-flip{
  0%{
    transform: rotateY(0deg) rotateZ(-60deg);
  }
  100%{
    transform: rotateY(360deg) rotateZ(-60deg);
  }
}

body{
  background: #efefef;
}

.preloader{
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 20px;
  display: block;
  width: 3.75em;
  height: 4.25em;
  margin-left: -1.875em;
  margin-top: -2.125em;
  transform-origin: center center;
  transform: rotateY(180deg) rotateZ(-60deg);

  .slice{
    border-top: 1.125em solid transparent;
    border-right: none;
    border-bottom: 1em solid transparent;
    border-left: 1.875em solid #f7484e;
    position: absolute;
    top: 0px;
    left: 50%;
    transform-origin: left bottom;
    border-radius: 3px 3px 0 0;
  }

  @for $i from 1 through 6 {
    .slice:nth-child(#{$i}) { 
      transform: rotateZ(60* $i + deg) rotateY(0deg) rotateX(0);
      animation: .15s linear .9 - $i*.08s preload-hide-#{$i} both 1;
    }
  }


  &.loading{
    animation: 2s preload-flip steps(2) infinite both;
    @for $i from 1 through 6 {
      .slice:nth-child(#{$i}) { 
        transform: rotateZ(60* $i + deg) rotateY(90deg) rotateX(0);
        animation: 2s preload-cycle-#{$i} linear infinite both;
      }
    }
  }

}