Generated by SassMeister.com.

spinner-input-HTML.haml

.spinners
  - 12.times do |i|
    %div{:class => "spinner-#{i+1}"}

spinner-input.scss

// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----

body {
  background-color: black;
}

.spinners {
  width: 100px;
  height: 100px;
  margin: 100px auto;
  //outline: 1px dashed lime;
  position: relative;
  animation-duration: 2s;
  animation-name: rotate;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  div {
    //background-color: red;
    width: 10px;
    height: 20px;
    position: absolute;
    border-radius: 5px;
    left: 45px;
    transform-origin: center 50px;
    //-webkit-transform-origin: center center;
  }  
}

@for $i from 1 through 12 {
  $deg: (360 / 12) * $i;
  $transp: $i / 12;
  .spinner-#{$i} {
    background-color: rgba(#999, $transp);
    -webkit-transform: rotate(#{$deg}deg);
    transform: rotate(#{$deg}deg);
  }
}

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

spinner-output.css

body {
  background-color: black;
}

.spinners {
  width: 100px;
  height: 100px;
  margin: 100px auto;
  position: relative;
  animation-duration: 2s;
  animation-name: rotate;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.spinners div {
  width: 10px;
  height: 20px;
  position: absolute;
  border-radius: 5px;
  left: 45px;
  transform-origin: center 50px;
}

.spinner-1 {
  background-color: rgba(153, 153, 153, 0.08333);
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
}

.spinner-2 {
  background-color: rgba(153, 153, 153, 0.16667);
  -webkit-transform: rotate(60deg);
  transform: rotate(60deg);
}

.spinner-3 {
  background-color: rgba(153, 153, 153, 0.25);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

.spinner-4 {
  background-color: rgba(153, 153, 153, 0.33333);
  -webkit-transform: rotate(120deg);
  transform: rotate(120deg);
}

.spinner-5 {
  background-color: rgba(153, 153, 153, 0.41667);
  -webkit-transform: rotate(150deg);
  transform: rotate(150deg);
}

.spinner-6 {
  background-color: rgba(153, 153, 153, 0.5);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.spinner-7 {
  background-color: rgba(153, 153, 153, 0.58333);
  -webkit-transform: rotate(210deg);
  transform: rotate(210deg);
}

.spinner-8 {
  background-color: rgba(153, 153, 153, 0.66667);
  -webkit-transform: rotate(240deg);
  transform: rotate(240deg);
}

.spinner-9 {
  background-color: rgba(153, 153, 153, 0.75);
  -webkit-transform: rotate(270deg);
  transform: rotate(270deg);
}

.spinner-10 {
  background-color: rgba(153, 153, 153, 0.83333);
  -webkit-transform: rotate(300deg);
  transform: rotate(300deg);
}

.spinner-11 {
  background-color: rgba(153, 153, 153, 0.91667);
  -webkit-transform: rotate(330deg);
  transform: rotate(330deg);
}

.spinner-12 {
  background-color: #999999;
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

spinner-rendered.html

<div class='spinners'>
  <div class='spinner-1'></div>
  <div class='spinner-2'></div>
  <div class='spinner-3'></div>
  <div class='spinner-4'></div>
  <div class='spinner-5'></div>
  <div class='spinner-6'></div>
  <div class='spinner-7'></div>
  <div class='spinner-8'></div>
  <div class='spinner-9'></div>
  <div class='spinner-10'></div>
  <div class='spinner-11'></div>
  <div class='spinner-12'></div>
</div>