HTML
<div class="base">
<div class="node"><div class="child"></div></div>
<div class="node"><div class="child"></div></div>
<div class="node"><div class="child"></div></div>
<div class="node"><div class="child"></div></div>
<div class="node"><div class="child"></div></div>
<div class="node"><div class="child"></div></div>
<div class="node"><div class="child"></div></div>
<div class="node"><div class="child"></div></div>
<div class="node"><div class="child"></div></div>
<div class="node"><div class="child"></div></div>
<div class="node"><div class="child"></div></div>
<div class="node"><div class="child"></div></div>
</div>
SASS
@import "compass"
$size: 424
$nodes: 12
body
margin: 0
padding: 0
height: 100%
overflow: hidden
background: black
.base
position: absolute
top: 50%
left: 50%
width: $size + px
height: $size + px
transform: translate(-50%, 0) rotate(180deg)
transform-origin: 50% 0
.node,
.child
position: absolute
top: 50%
left: 50%
width: 18px
height: 18px
margin: -9px 0 0 -9px
transform-origin: 50% -212px
.child
transform-origin: 50% 50%
.child:before,
.child:after
content: ""
display: block
position: absolute
top: 50%
left: 50%
width: 18px
height: 18px
margin: -9px 0 0 -9px
background: white
border-radius: 50%
.child:before
transform: translate(-30px)
.child:after
transform: translate(30px)
.node:nth-child(odd) .child
animation-name: rF
animation-duration: 2s
animation-timing-function: ease
animation-iteration-count: infinite
.node:nth-child(even) .child
animation-name: rB
animation-duration: 2s
animation-timing-function: ease
animation-iteration-count: infinite
$angle: 0
$step: (2*pi()) / $nodes
@for $i from 1 through $nodes
.node:nth-child(#{$i})
transform: rotate(30 * $i - 30 + deg)
.child
animation-delay: $i * (1 / $nodes) + s
@keyframes rF
0%
transform: rotate(0deg)
50%,
100%
transform: rotate(180deg)
@keyframes rB
0%
transform: rotate(0deg)
50%,
100%
transform: rotate(-180deg)
$angle: $angle + $step