Generated by SassMeister.com.

SassMeister-input-HTML.html

  <div class="tick"></div>
  <div class="tick"></div>
  <div class="tick"></div>
  <div class="tick"></div>
  <div class="tick"></div>
  <div class="tick"></div>
  <div class="tick"></div>
  <div class="tick"></div>
  <div class="tick"></div>
  <div class="tick"></div>
  <div class="tick"></div>
  <div class="tick"></div>

SassMeister-input.sass

// ----
// Sass (v3.2.19)
// Compass (v0.12.6)
// ----

$animation-duration: 1s

.tick
  position: absolute
  top: 50%
  left: 50%
  margin: -15px -2px 0 0
  height: 30px
  width: 5px
  background: red
  -webkit-animation: spinner 12s infinite
  
  @for $i from 1 through 12
    &:nth-child(#{$i})
      transform: rotate(360deg/12 * $i) translateY(50px)
      -webkit-animation-delay: $i
      
@-webkit-keyframes spinner
  0%
    opacity: 1
  8.33%
    opacity: 0
  100%
    opacity: 1
      
    
      

SassMeister-output.css

.tick {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -15px -2px 0 0;
  height: 30px;
  width: 5px;
  background: red;
  -webkit-animation: spinner 12s infinite;
}
.tick:nth-child(1) {
  transform: rotate(30deg) translateY(50px);
  -webkit-animation-delay: 1;
}
.tick:nth-child(2) {
  transform: rotate(60deg) translateY(50px);
  -webkit-animation-delay: 2;
}
.tick:nth-child(3) {
  transform: rotate(90deg) translateY(50px);
  -webkit-animation-delay: 3;
}
.tick:nth-child(4) {
  transform: rotate(120deg) translateY(50px);
  -webkit-animation-delay: 4;
}
.tick:nth-child(5) {
  transform: rotate(150deg) translateY(50px);
  -webkit-animation-delay: 5;
}
.tick:nth-child(6) {
  transform: rotate(180deg) translateY(50px);
  -webkit-animation-delay: 6;
}
.tick:nth-child(7) {
  transform: rotate(210deg) translateY(50px);
  -webkit-animation-delay: 7;
}
.tick:nth-child(8) {
  transform: rotate(240deg) translateY(50px);
  -webkit-animation-delay: 8;
}
.tick:nth-child(9) {
  transform: rotate(270deg) translateY(50px);
  -webkit-animation-delay: 9;
}
.tick:nth-child(10) {
  transform: rotate(300deg) translateY(50px);
  -webkit-animation-delay: 10;
}
.tick:nth-child(11) {
  transform: rotate(330deg) translateY(50px);
  -webkit-animation-delay: 11;
}
.tick:nth-child(12) {
  transform: rotate(360deg) translateY(50px);
  -webkit-animation-delay: 12;
}

@-webkit-keyframes spinner {
  0% {
    opacity: 1;
  }

  8.33% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

SassMeister-rendered.html

  <div class="tick"></div>
  <div class="tick"></div>
  <div class="tick"></div>
  <div class="tick"></div>
  <div class="tick"></div>
  <div class="tick"></div>
  <div class="tick"></div>
  <div class="tick"></div>
  <div class="tick"></div>
  <div class="tick"></div>
  <div class="tick"></div>
  <div class="tick"></div>