Super simple CSS spinner generator using SCSS. Requires bourbon.io

spinner.html

<div class="spinner">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

spinner.scss

@import 'bourbon';

.spinner {
  $lines: 9;
  $duration: 1;

  $degree: (360 / $lines);
  $tick: ($duration / $lines);
  
  width: 200px;
  height: 200px;
  position: relative;

  div {
    @include animation-name(spinner-fade);
    @include animation-duration(#{$duration}s);
    @include animation-direction(liner);
    @include animation-iteration-count(infinite);
    @include animation-fill-mode(both);
    @include animation-timing-function(ease-in-out);

    background: #000;
    position: absolute;
    left: 45%;
    top: 38.5%;
    border-radius: 5px;
    width: 10%;
    height: 27%;
  }
  
  @for $i from 1 through $lines {
    div:nth-child(#{$i}) {
      @include transform(rotate(#{(($i - 1) * $degree)}deg) translate(0, -130%));
      @include animation-delay(#{-(($duration - $i * $tick))}s);
    }
  }
}