.loader
  i.loader__tile.loader__tile__1
  i.loader__tile.loader__tile__2
  i.loader__tile.loader__tile__3
  i.loader__tile.loader__tile__4
  i.loader__tile.loader__tile__5
  i.loader__tile.loader__tile__6
  i.loader__tile.loader__tile__7
  i.loader__tile.loader__tile__8
  i.loader__tile.loader__tile__9

$colors-logo: (
  1: #943048,
  2: #d7532d,
  3: #d2cabb,
  4: #9faad0,
  5: #b39a3b,
  6: #dc2c34,
  7: #ece5be,
  8: #d07500,
  9: #7983a9
);

// ==========================================================================
// Loader Base
// ==========================================================================

$loader-size: 100px;
$animation-duration: 2s;
$animation-delay: .1s;

.loader {
  width: $loader-size;
  height: $loader-size;
  perspective: $loader-size;
  
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -($loader-size/2);
  margin-left: -($loader-size/2);
}


.loader__tile {
  display: block;
  float: left;
  width: 33.33%;
  height: 33.33%;

  animation-name: flip;
  transform-style: preserve-3d;
  animation-iteration-count: infinite;
  animation-duration: $animation-duration;
  animation-timing-function: ease-in-out;
  transform: rotateY(0deg);
  z-index: 0;
}



// ==========================================================================
// Loader Parts
// ==========================================================================

@each $key, $color in $colors-logo {
  .loader__tile__#{$key} {
    background-color: $color;
    animation-delay: ($animation-delay * $key);
  }
}




// ==========================================================================
// Loader Animation
// ==========================================================================

@keyframes flip {
  0% { transform: rotateY(0deg); }
  11% { transform: rotateY(180deg); }
}