$n: 16
$s: 20em
$t: 2s
$c1: #9b59b6
$c2: #f1c40f
*
  &, &:before, &:after
    margin: 0
    padding: 0
    +box-sizing(border-box)
  &:before, &:after
    content: ''
html, body
  height: 100%
body
  position: relative
  background: #f7f7f7
  overflow: hidden
.container
  &, *, *:before, *:after
    position: absolute
    top: 0
    right: 0
    bottom: 0
    left: 0
    margin: auto
    +transform-style(preserve-3d)
  width: $s
  height: $s
  border: 1px solid rgba(black, 0.1)
  +border-radius(50%)
.thing
  &:before, &:after
    right: auto
    left: -#{($s / 2) / $n}
    width: $s / $n
    height: $s / $n
    z-index: 2
  &:before
    background: $c1
  &:after
    background: $c2
  @for $i from 0 to $n
    &:nth-child(#{$i + 1})
      +transform(rotateZ($i * 360deg / $n))
      &:before
        animation: before $t -#{($i / $n) * $t} linear infinite
      &:after
        animation: after $t -#{($i / $n) * $t} linear infinite
+keyframes(before)
  25%
    +transform(translateX(-($s / $n) * 2))
    z-index: 3
  75%
    +transform(translateX(($s / $n) * 2))
    z-index: 3
+keyframes(after)
  25%
    +transform(translateX(($s / $n) * 2))
    z-index: 1
  75%
    +transform(translateX(-($s / $n) * 2))
    z-index: 1