// http://beesandbombs.tumblr.com/post/102102739834/check-out-bees-bombs-roulette-refresh-for-a

$angles: 36
$angle: 360deg / $angles
$skew: (90deg - $angle) / 2
$elems: 12
$dur: 1.4s
$side: 600px
$step: $side / $elems

html, body
  background: #36465D
  overflow: hidden

.wrapper
  position: absolute
  width: $side
  height: $side
  bottom: -($side + $step) / 2
  left: 0
  right: 0
  margin: 0 auto
.circle
  position: absolute
  width: $side
  height: $side
  border-radius: 50%
  overflow: hidden
  left: 0
  right: 0
  bottom: 0
  top: 0
  margin: auto
  animation: rotate $dur infinite ease-in-out alternate
 
  @for $i from 1 through $elems - 1
    &:nth-child(#{$i + 1})
      width: $side - $step * $i
      height: $side - $step * $i
      animation-delay: -($i * $dur / $elems / 1.5)
    

.elem
  width: 0
  height: 0
  top: 50%
  left: 50%
  position: relative

  @for $i from 1 through $angles
    &:nth-child(#{$i})
      transform: rotate($angle * (4 + $i))

  &::after, &::before
    content: ''
    position: absolute
    top: 50%
    left: 50%
    display: block
    width: $side / 2
    height: $side / 2
    transform-origin: 0% 0%
  &::before
    background: #181414
    transform: skew($skew, $skew)
  &::after
    background: #DC1E14
    transform: skew($skew, $skew) translate(-100%, -100%)
  &:nth-child(2n-1)
    &::before
      background: #DC1E14
    &::after
      background: #181414
  &:nth-child(1)
    &::after
      background: #28A019

@keyframes rotate
  from
    transform: rotateZ(-30deg)
  to
    transform: rotateZ(30deg)