Spinning Dots

@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