@include keyframes(rotate){
  25%{
    @include transform(scale(1.2) rotate(90deg) skew(45deg));
  } 
  
  50%{
    @include transform(rotate(180deg));
  }
  
    75%{
    @include transform(scale(2) rotate(270deg));
  } 
  100%{
    @include transform(scale(1) rotate(360deg));
  }
}


@include keyframes(rampUp){
  100%{
    opacity: 1;
  }
}

body{
  background: #111;
}
.spinner{
  opacity: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid hsla(0, 20%, 50%, .4);

  @for $i from 1 through 100{
      &:nth-of-type(#{$i}){
        @include animation(rotate 6s linear infinite $i * .1 + s);
         width: $i * 3 + px;
         height: $i * 3 + px;
        
        margin-top: (($i * 3) / 2) * -1 + px;
        margin-left: (($i * 3) / 2) * -1 + px;
        
        .orb{
          position: absolute;
          top: 0; 
          left: 0;
          width: 10px;
          height: 10px;
          border: 1px solid hsla(220, 20%, 50%, .4);
          border-radius: 50%;
         
        }
      }
  }
}