$n: 12
$r: 2em
*
  &, &:before, &:after
    margin: 0
    padding: 0
    +box-sizing(border-box)
  &:before, &:after
    content: ''
html, body
  height: 100%
body
  position: relative
  background: #f3f2f1
  overflow: hidden
.container
  &, *, *:before, *:after
    position: absolute
    top: 0
    right: 0
    bottom: 0
    left: 0
    margin: auto
    +transform-style(preserve-3d)
.dot
  width: $r
  height: $r
  @for $i from 0 to $n
    &:nth-child(#{$i + 1})
      +transform(rotateZ($i * 360deg / $n)translateX($r * sqrt($n * 1.15)))
  &:before, &:after
    width: $r
    height: $r
    +border-radius(50%)
    background: #272727
  &:nth-child(odd):before
    animation: dot-before 2s linear infinite
  &:nth-child(odd):after
    animation: dot-after 2s linear infinite reverse
  &:nth-child(even):before
    animation: dot-before 2s linear infinite reverse
  &:nth-child(even):after
    animation: dot-after 2s linear infinite
+keyframes(dot-before)
  0%
    visibility: visible
    +transform(rotateZ(0deg)translateY($r))
  49%
    visibility: visible
    +transform(rotateZ(180deg)translateY($r))
  50%, 100%
    visibility: hidden
    +transform(rotateZ(180deg)translateY($r))
+keyframes(dot-after)
  0%, 49%
    visibility: hidden
    +transform(rotateZ(0deg)translateY($r))
  50%
    visibility: visible
    +transform(rotateZ(0deg)translateY($r))
  100%
    visibility: visible
    +transform(rotateZ(-180deg)translateY($r))