$n-rings: 8;
$diameter: 17.5em;
$thickness: .5em;

$myEaseInOut: cubic-bezier(.86, 0, .07, 1);

$base-angle: 360deg/$n-rings;
$factor: ($n-rings/2 - 1)/$n-rings;

html { background: #181818; }

.ring {
  position: absolute;
  top: 50%; left: 50%;
  margin: -$diameter/2;
  width: $diameter; height: $diameter;
  border-radius: 50%;
  box-shadow: inset #f0d7b4 0 0 0 $thickness;
  animation: a 2s $myEaseInOut infinite alternate;
  
  @for $i from 0 to $n-rings {
    &:nth-child(#{$i + 1}) {
      animation-name: ani#{$i + 1}, thickness;
    }
  	
  	@at-root {
      @keyframes ani#{$i + 1} {
        from {
          transform: 
            rotate(($i + .5)*$base-angle) 
        	 translate($factor*$diameter);
        }
        to {
          transform: 
            rotate(($i + .5)*$base-angle) 
        	 translate(0);
        }
      }
    }
  }
}

@keyframes thickness {
  to { box-shadow: inset #f0d7b4 0 0 0 2*$thickness; }
}