<div class="loader">
  <div class="square" ></div>
  <div class="square"></div>
  <div class="square last"></div>
  <div class="square clear"></div>
  <div class="square"></div>
  <div class="square last"></div>
  <div class="square clear"></div>
  <div class="square "></div>
  <div class="square last"></div>
</div>

$squarew: 15px;
$squareh: 15px;
$squaremargin: 5px;
$loaderw: $squarew * 3 + $squaremargin *2;
$loaderh: $squareh * 3 + $squaremargin *2;
$delayenter: 0.3s;
$topenter: -10px;

@mixin transition($value) {
  -webkit-transition: $value ;
   -moz-transition: $value ;
          transition: $value ;
}

@mixin delay( $delay ) {
  -webkit-animation-delay: $delay;
   -moz-animation-delay: $delay;
  animation-delay: $delay;
}
@-webkit-keyframes enter{
  0%   { 
    opacity: 0;
    top: $topenter;
  }
  5%   { 
    opacity: 1;
    top: 0px;
  }
  50.9% { 
    opacity: 1;
    top: 0px;
  }
  55.9% { 
    opacity: 0;
    top: - $topenter;
  }
}
@keyframes enter{
  0%   { 
    opacity: 0;
    top: $topenter;
  }
  5%   { 
    opacity: 1;
    top: 0px;
  }
  50.9% { 
    opacity: 1;
    top: 0px;
  }
  55.9% { 
    opacity: 0;
    top: - $topenter;
  }
}
@-moz-keyframes enter{
  0%   { 
    opacity: 0;
    top: $topenter;
  }
  5%   { 
    opacity: 1;
    top: 0px;
  }
  50.9% { 
    opacity: 1;
    top: 0px;
  }
  55.9% { 
    opacity: 0;
    top: - $topenter;
  }
}