- for i in (1..25)
  span class='tr'

$n: 16;
$rotate: 0deg;

body {
  background: #fff;
}

.tr {
  position: absolute;
  top:  55%;
  left: 50%;
  animation: wobble .3s infinite alternate ease-in-out;
}

.tr:before {
  content: '';
  border-style: solid;
  border-color: transparent transparent rgba(0,0,0,.1) transparent;
  transform-origin: 50% 65%;
}

@for $i from 1 through 25 {
  $m: ($n - $i);
  $rotate: if($m < 0,$rotate + $m / 3,$rotate + $m);
  
  .tr:nth-child(#{$i}) {
    z-index: 20 - $i;
    margin: #{$i * -9}px 0 0 #{$i * -8}px;
    animation-delay: #{$i * 20}ms
  }
  
  .tr:nth-child(#{$i}):before {
    display: block;
     border-width: 0 #{$i * 8}px #{$i * 14}px #{$i * 8}px;
    transform: rotate($rotate + 10deg)
  }
}

@keyframes wobble {
  0% {transform: rotate(0deg)}
  100% {transform: rotate(10deg)}
}