$n: 16
$r: 7.5em
$t: 2s
$ba: 180deg / $n
*
  &, &:before, &:after
    margin: 0
    padding: 0
    +box-sizing(border-box)
  &:before, &:after
    content: ''
html, body
  height: 100%
body
  position: relative
  background: #f7f7f7
  overflow: hidden
.sphere
  &, *, *:before, *:after
    position: absolute
    top: 0
    right: 0
    bottom: 0
    left: 0
    margin: auto
    +transform-style(preserve-3d)
  +transform(rotateY(45deg))
.ring
  width: $r * 2
  height: $r * 2
  +border-radius(50%)
  &:before
    border: 
      width: 1px
      style: solid
      color: #272727 #272727 transparent transparent
    +border-radius(50%)
  @for $i from 0 to $n
    $ca: $i * $ba - 90deg
    &:nth-child(#{$i + 1})
      +transform(translateZ($r * sin($ca))scale(cos($ca)))
      &:before
        animation: ring $t -#{($i / $n) * $t} linear infinite
+keyframes(ring)
  100%
    +transform(rotateZ(360deg))