loader.css

$boxsize: 20;
$gutter: 5;
$x1: $boxsize + $gutter;
$x2: $x1 * 2;
$duration: 7;

.loader {
  
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate( -50%, -50% ) rotateZ( 45deg );
  width: #{ ( $boxsize * 3 ) + ( $gutter * 2 ) }px;
  height: #{ ( $boxsize * 3 ) + ( $gutter * 2 ) }px;
  
  > div {
    
    position: absolute;
    top: 0px;
    left: 0px;
    display: inline-block;
    width: #{ $boxsize }px;
    height: #{ $boxsize }px;
    transform: translate( 0px, 0px );
    animation-duration: #{ $duration }s;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
    animation-direction: normal;
    animation-timing-function: cubic-bezier(0.75, 0, 0, 0.75);
    
    &:before {
      
      content: "";
      display: inline-block;
      width: 100%;
      height: 100%;
      background-color: #1abc9c;
      border-radius: 3px;
      animation-name: background;
      animation-duration: 30s;
      animation-iteration-count: infinite;
      animation-direction: normal;
      animation-timing-function: ease-in-out;
      
    }
    
    $positions: (
      "0px, #{ $x1 }px", "0px, #{ $x2 }px", "#{ $x1 }px, #{ $x2 }px",
      "#{ $x1 }px, #{ $x1 }px", "#{ $x2 }px, #{ $x1 }px", "#{ $x2 }px, 0px",
      "#{ $x1 }px, 0px"
    );
    
    @for $i from 1 through 7 {
      
      $part: $duration / length( $positions );
      $delay: ( 7 - ( $i * $part ) ) - ( $duration / $part );
      
      &:nth-child( #{$i} ) {
        animation-delay: #{ $delay }s;
        transform: translate( #{ nth( $positions, $i ) } );
        animation-name: position#{ $i };
        
      }
    }
  
  }
  
}

@for $i from 1 through 8 {
  
  $positions: (
    "0px, #{ $x1 }px", "0px, 0px", "#{ $x1 }px, 0px", 
    "#{ $x2 }px, 0px", "#{ $x2 }px, #{ $x1 }px", "#{ $x1 }px, #{ $x1 }px", 
    "#{ $x1 }px, #{ $x2 }px", "0px, #{ $x2 }px", "0px, #{ $x1 }px"
  );
  
  @keyframes position#{ $i } {
    
    $frames: length( $positions ) - 1;
    
    @for $ii from 0 through $frames {
      
      $percent: $ii * ( 100 / $frames );
      $percent2: $percent + 5;
      $positionIndex: $ii + 1;
      $altIndex: $positionIndex - ( length( $positions ) );
      $position: if(
        length( $positions ) < $positionIndex, 
          nth( $positions, $altIndex ), 
          nth( $positions, $positionIndex )
      );
      
      #{ $percent }% { transform: translate( #{ $position } ); }
      #{ $percent2 }% { transform: translate( #{ $position } ); }
      
    }
  }
}

@keyframes background {
  10% { background-color: #9b59b6; }
  20% { background-color: #2980b9; }
  30% { background-color: #c0392b; }
  40% { background-color: #16a085; }
  50% { background-color: #f39c12; }
  60% { background-color: #27ae60; }
  70% { background-color: #419fdd; }
  80% { background-color: #f1c40f; }
  90% { background-color: #1abc9c; }
}



.reference {
  
  position: absolute;
  bottom: 10px;
  right: 10px;
  height: 40px;
  padding: 6px 5px 5px 40px;
  border: 1px solid rgb( 230, 230, 230 );
  border-radius: 3px;
  box-shadow: 0px 2px 4px rgba( 0, 0, 0, 0.1 );
  text-decoration: none;
  color: #ea4c89;
  font-family: helvetica;
  font-weight: bold;
  transition: all 0.2s ease-out;
  
  &:hover {
    
    box-shadow: 0px 3px 3px rgba( 0, 0, 0, 0.2 );
    border-color: transparentize( #ea4c89, 0.5 );
    
  }
  
  &:before {
    
    content: "";
    display: block;
    position: absolute;
    top: 2px;
    left: 2px;
    width: 40px;
    height: 40px;
    background-image: url(https://d13yacurqjgara.cloudfront.net/assets/dribbble-ball-dnld-35eba27acd4710f90ea9aa7ad8037fbb19ad997078531844fd34456b4c6551e4.png);
    background-size: 60px;
    background-position: 100% 100%;
    background-repeat: no-repeat;
    border-radius: 3px;
  }
  
  .author {
    
    color: rgb( 45, 50, 55 );
    font-size: 12px;
    font-weight: normal;
    
  }
  
}



<div class="loader">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<a class="reference" href="https://dribbble.com/shots/2984114-Gusano-loader" target="_blank">
  View original shot on Dribbble<br>
  <span class="author">by Vitaly Silkin</span>
</a>