$r: 150;
$total: 13;
$width: $r*.12;
$border: $width * 0.3;

.circle{
  width: $r*2px;
  height: $r*2px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -#{$r}px 0 0 -#{$r}px;
  border-radius: 100%;
  animation: circle 60s linear infinite;
  

  div{
    width: $r*2px;
    height: #{$width}px;
    position: absolute;
    top: 50%;
    margin-top: -#{$width/2}px;
      
    $i: $total;
    @while $i > 0 { 
      &:nth-of-type( #{$i} ){ 
        transform: rotate( ( 360 / $total )* $i * 1deg);
        span{
          animation-delay: $i * .15s;
        }
      }
      $i: $i - 1;
    }
    
    
    span{
      width: #{$width}px;
      height: #{$width}px;
      border: #{$border}px solid black;
      border-radius: 100%;
      position:absolute;
      top: 50%;
      margin-top: 0px - ($width/2) - $border;
      left: 0%;
      //left: 100%;
      animation: across 9s ease-in-out infinite;
    }
  }
}

@keyframes circle {
  0% { transform: rotate(360deg); }
  50% { transform: rotate(180deg); }
  100% { transform: rotate(0deg); }  
}

@keyframes across {
  0%, 65%, 100% { left: 0% } 
  15%, 50% { left: $r*2px - $width - ($border * 1.9) }
}