Simple image-free loading spinner using Jade and Stylus

spinner.jade

.spinner
  - for (var i = 1; i <= 12; i++)
    span

spinner.styl

@import 'nib'

.spinner
  // change the size variable, everything else is based on it
  size = 20px
  thickness = round(size * 0.1)
  length = round(size * 0.28)
  radius = round(size / 2)
  halfThickness = round(thickness / 2)

  width size
  height size
  display inline-block
  position relative
  transform-origin center
  
  &.animating
    animation spinner 1s steps(12, end) infinite
  
  span
    width thickness
    height length
    border-radius halfThickness
    background gray
    display block
    position absolute
    top 0
    left radius - halfThickness
    transform-origin halfThickness radius
    
    for i in (1..12)
      &:nth-child({i})
        transform rotate((i - 1) * 30deg) translate3d(0, 0, 0)
        opacity max(0.3, 1 - (12 - i) / 10)
        
@keyframes spinner
  0%
    transform rotate(0deg) translate3d(0,0,0)
  100%
    transform rotate(360deg) translate3d(0,0,0)