@mixin box($size) {   
  border-radius: 3px;
  display: block;
  height: $size;
  width: $size;
  content: ""; 
  outline: 0;
  border: 0; 
}

.loader {  
  position: relative;
  margin: 0 auto;
  background: blue;
  @include box(20px);
  transform: rotate(0deg);
  animation: loaderAnime 3s infinite linear;
  &:before {   
    opacity: 0.6;
    position: absolute;
    background: green;
    @include box(20px); 
    top: 0; left: 25px;
    animation: beforeAnime 4s infinite;
  }
  &:after {
    opacity: 0.6;
    position: absolute;
    background: red;
    @include box(20px); 
    top: 25px; left: 0;
    animation: afterAnime 1s infinite;
  }  
}
@keyframes loaderAnime {
  100% {transform: rotate(360deg);}
}
@keyframes beforeAnime {
  25% {top: 25px; left: 25px;}
  50% {top: 25px; left: 0;}
  75% {top: 0; left: 0}
}
@keyframes afterAnime {
  25% {top: 0; left: 0;}
  50% {top: 0; left: 25px;}
  75% {top: 25px; left: 25px;}
}

body {
  padding: 2em;
}