$Logocolors: #b2db11 #ffff00 #ff0000 #00a0c6 #66b821 #ffb200 #f0027f #0a50a1 #008837 #ff6600 #81017e #13007c;
$boxSize: 20px;
$boxWidth: 20px;
$loaderDelay: 100;
$loaderDuration : 1700;
$animationTiming: cubic-bezier(.645, .045, .355, 1);

.Loader {
  width: $boxSize * 4;
  overflow: hidden;
  margin: 40px auto;
  min-height: 60px;
}

.Loader-item {
  display: block;
  width: $boxSize;
  height: $boxSize;
  float: left;
  @include animation-name(flipHoz);
  @include animation-duration($loaderDuration + ms);
  @include animation-timing-function($animationTiming);
  @include animation-iteration-count(infinite);
  opacity: 0;

  &:nth-child(1) {
    border-radius:5px 0 0 0;
  }

  &:nth-child(4) {
    border-radius:0 5px 0 0;
  }

  &:nth-child(9) {
    border-radius:0 0 0 5px;
  }

  &:nth-child(12) {
    border-radius:0 0 5px 0;
  }

  @each $color in $Logocolors {
    $i: index($Logocolors, $color);
    $lengd:length($Logocolors);
  
    &:nth-child(#{$lengd}n+#{$i}) {
      background: nth($Logocolors, $i);
    }
  }
}

.Loader--fadescale .Loader-item {
  @include animation-name(ScaleFade);
}

.Loader--fade .Loader-item {
  @include animation-name(FadeOnly);
}
.Loader--fadescale, .Loader--fade {
  .Loader-item {
    
    &:nth-child(1) {
      -webkit-animation-delay: (1 * $loaderDelay *1.5) + ms; 
    }
    &:nth-child(2), &:nth-child(5) {
      -webkit-animation-delay: (1 * $loaderDelay *1.5) + ms;
    }
    
    &:nth-child(3), &:nth-child(6), &:nth-child(9) {
      -webkit-animation-delay: (2 * $loaderDelay *1.5) + ms;
    }

    &:nth-child(4), &:nth-child(10), &:nth-child(7) {
      -webkit-animation-delay: (3 * $loaderDelay *1.5) + ms;
    }

    &:nth-child(8), &:nth-child(11){
      -webkit-animation-delay: (4 * $loaderDelay *1.5) + ms;
    }

    &:nth-child(12) {
      -webkit-animation-delay: (5 * $loaderDelay *1.5) + ms;
    }
  }
}

.Loader--drop .Loader-item {
  @include animation-name(Drop);
  @include transform(translate(0, -40px));
    @each $color in $Logocolors {
    $i: index($Logocolors, $color);
    $lengd:length($Logocolors);
  
    &:nth-child(#{$lengd}n+#{$i}) {
      @include animation-delay((($lengd - $i) * $loaderDelay) + ms);
    }
  }
}
@include keyframes(FadeOnly){
  0%    { opacity:0;   }
  50%   { opacity:1;   }
  100%  { opacity:0;   }
}

@include keyframes(ScaleFade){
  0%    {  @include transform(scale(0)); opacity:0;   }
  50%   { @include transform(scale(1)); opacity:1;}
  100%  { @include transform(scale(0)); opacity:0;   }
}

@include keyframes(Drop) {
  0%    {  transform: translate(0, -40px); opacity:0;   }
  20%   { transform: translate(0, 0); opacity:1;  }
  60%   { transform: translate(0, 0); opacity:1;  }
  80%  { transform: translate(0%, 40px);  opacity: 0;}
  100%  { transform: translate(0%, 40px);  opacity: 0;}
}