<!-- Forked from http://codepen.io/amos/pen/ywJdK to compare Codepen with jsFiddle --> <div class="wip"></div> <div class="wip"></div> <div class="wip"></div> <div class="wip"></div> <div class="wip"></div> <div class="wip"></div> <div class="wip"></div> <div class="wip"></div> <div class="wip"></div> <div class="wip"></div> <div class="wip"></div> <div class="wip"></div> <div class="wip"></div> <div class="wip"></div> <div class="wip"></div> <div class="wip"></div> <div class="wip"></div> <div class="wip"></div> <div class="wip"></div> <div class="wip"></div> <div class="wip"></div> <div class="wip"></div> <div class="wip"></div> <div class="wip"></div> <div class="wip"></div> <div class="wip"></div> <div class="wip"></div> <div class="wip"></div> <div class="wip"></div> <div class="wip"></div> <div class="wip"></div> <div class="wip"></div> <div class="wip"></div> <div class="wip"></div> <div class="wip"></div> <div class="wip"></div> <div class="wip"></div> <div class="wip"></div> <div class="wip"></div> <div class="wip"></div> <div class="wip"></div> <div class="wip"></div> <div class="wip"></div> <div class="wip"></div> <div class="wip"></div> <div class="wip"></div> <div class="wip"></div> <div class="wip"></div> <div class="wip"></div> <div class="wip"></div>
body{ background: #111; } @for $i from 0 through 50{ .wip:nth-child(#{$i}){ position: absolute; top: 30%; left: 45%; transform-origin: center 90px; transform: rotate($i*7.2deg) rotateY(-50deg); &:nth-child(#{$i}):after{ content:''; width: 50px; height: 1px; border-top: 5px dotted adjust-hue(red, $i*50%); display: block; animation: wip 5s linear infinite; animation-delay: $i*-.2s; } } @keyframes wip{ 0%{transform: rotate(1turn); } } }