h1 box-shadow pseudo loaders
.loading.loading--one
.loading.loading--two
.loading.loading--three
.loading.loading--four

h1
  color #fafafa
  text-align center

$loader-color  = #e74c3c
$loader-size   = 20px
$loader-margin = 5px
$first = $loader-size + $loader-margin
$second = (2 * $loader-size) + (2 * $loader-margin)
$third = (3 * $loader-size) + (3 * $loader-margin)
$fourth = (4 * $loader-size) + (4 * $loader-margin)
$fifth = (5 * $loader-size) + (5 * $loader-margin)
$hide = -1 * $loader-size
$bounce = -1 * $first

*
  box-sizing border-box

body
  background-color #111
  text-align center
  
.loading
  width 200px
  height 200px
  display inline-block
  position relative
  border-radius 10px
  background-color #eee
  border 4px solid grey
  margin 20px 10px
  &--one
    &:after
      content          ''
      position         absolute
      top              50%
      left             50%
      // full width is 20 + (5*20) + margin       
      margin-left      -(($fifth / 2) + $loader-size)
      margin-top       -($loader-size / 2)
      background-color transparent
      height           $loader-size
      width            $loader-size
      border-radius    100%

      box-shadow $first 0 0 0 $loader-color,
        $second $first 0 0 $loader-color,
        $second (-1 * $first) 0 0 $loader-color,
        $second 0 0 0 $loader-color,
        $third (-1 * $second) 0 0 $loader-color,
        $third (-1 * $first) 0 0 $loader-color,
        $third 0 0 0 $loader-color,
        $third $first 0 0 $loader-color,
        $third $second 0 0 $loader-color,
        $fourth $first 0 0 $loader-color,
        $fourth 0 0 0 $loader-color,
        $fourth (-1 * $first) 0 0 $loader-color,    
        $fifth 0 0 0 $loader-color

      animation square 1s infinite linear


  &--two
    &:after
      content          ''
      position         absolute
      top              50%
      left             50%
      margin-left      -(($fifth / 2) + $loader-size)
      margin-top       -($loader-size / 2)
      background-color transparent
      height           $loader-size
      width            $loader-size
      border-radius    100%
      animation bobble 1s infinite ease
      box-shadow $first 0 0 0 $loader-color,
        $second 0 0 0 $loader-color,
        $third 0 0 0 $loader-color,
        $fourth 0 0 0 $loader-color,
        $fifth 0 0 0 $loader-color
      
  &--three
    &:after
      content          ''
      position         absolute
      top              50%
      left             50%
      margin-left      -(($third / 2) + $loader-size)
      margin-top       -($loader-size / 2)
      background-color transparent
      height           $loader-size
      width            $loader-size
      border-radius    100%
      animation snake 2s infinite ease
      box-shadow $first $first 0 0 $loader-color,
        $second $first 0 0 $loader-color,
        $third $first 0 0 $loader-color,
        $third 0 0 0 $loader-color,
        $third (-1 * $first) 0 0 $loader-color,
        $second (-1 * $first) 0 0 $loader-color,
        $first (-1 * $first) 0 0 $loader-color,
        $first 0 0 0 $loader-color,
        $second 0 0 0 $loader-color
  &--four
    &:after
      content          ''
      position         absolute
      top              50%
      left             50%
      margin-left      -(($fifth / 2) + $loader-size)
      margin-top       -($loader-size / 2)
      background-color transparent
      height           $loader-size
      width            $loader-size
      border-radius    100%
      animation bridge .75s infinite ease
      box-shadow $first 0 0 0 $loader-color,
        $second 0 0 0 $loader-color,
        $third 0 0 0 $loader-color,
        $fourth 0 0 0 $loader-color,
        $fifth 0 0 0 $loader-color

        
        
@keyframes bridge
  0%
    box-shadow $first 0 0 0 $loader-color,
      $second 0 0 0 $loader-color,
      $third 0 0 0 $loader-color,
      $fourth 0 0 0 $loader-color,
      $fifth 0 0 0 $loader-color
  15%
    box-shadow $first $bounce 0 0 $loader-color,
      $second 0 0 0 $loader-color,
      $third 0 0 0 $loader-color,
      $fourth 0 0 0 $loader-color,
      $fifth 0 0 0 $loader-color
  30%
    box-shadow $first 0 0 0 $loader-color,
      $second $bounce 0 0 $loader-color,
      $third 0 0 0 $loader-color,
      $fourth 0 0 0 $loader-color,
      $fifth 0 0 0 $loader-color
  45%
    box-shadow $first 0 0 0 $loader-color,
      $second 0 0 0 $loader-color,
      $third $bounce 0 0 $loader-color,
      $fourth 0 0 0 $loader-color,
      $fifth 0 0 0 $loader-color
  60%
    box-shadow $first 0 0 0 $loader-color,
      $second 0 0 0 $loader-color,
      $third 0 0 0 $loader-color,
      $fourth $bounce 0 0 $loader-color,
      $fifth 0 0 0 $loader-color    
  75%
    box-shadow $first 0 0 0 $loader-color,
      $second 0 0 0 $loader-color,
      $third 0 0 0 $loader-color,
      $fourth 0 0 0 $loader-color,
      $fifth $bounce 0 0 $loader-color  
  100%
    box-shadow $first 0 0 0 $loader-color,
      $second 0 0 0 $loader-color,
      $third 0 0 0 $loader-color,
      $fourth 0 0 0 $loader-color,
      $fifth 0 0 0 $loader-color    
  
@keyframes bobble
  0%
    box-shadow $first 0 0 $hide $loader-color,
      $second 0 0 $hide $loader-color,
      $third 0 0 $hide $loader-color,
      $fourth 0 0 $hide $loader-color,
      $fifth 0 0 $hide $loader-color
  10%
    box-shadow $first 0 0 0 $loader-color,
      $second 0 0 $hide $loader-color,
      $third 0 0 $hide $loader-color,
      $fourth 0 0 $hide $loader-color,
      $fifth 0 0 $hide $loader-color
  20%
    box-shadow $first 0 0 0 $loader-color,
      $second 0 0 0 $loader-color,
      $third 0 0 $hide $loader-color,
      $fourth 0 0 $hide $loader-color,
      $fifth 0 0 $hide $loader-color
  30%
    box-shadow $first 0 0 0 $loader-color,
      $second 0 0 0 $loader-color,
      $third 0 0 0 $loader-color,
      $fourth 0 0 $hide $loader-color,
      $fifth 0 0 $hide $loader-color
  40%
    box-shadow $first 0 0 0 $loader-color,
      $second 0 0 0 $loader-color,
      $third 0 0 0 $loader-color,
      $fourth 0 0 0 $loader-color,
      $fifth 0 0 $hide $loader-color
  50%
    box-shadow $first 0 0 0 $loader-color,
      $second 0 0 0 $loader-color,
      $third 0 0 0 $loader-color,
      $fourth 0 0 0 $loader-color,
      $fifth 0 0 0 $loader-color
  60%
    box-shadow $first 0 0 $hide $loader-color,
      $second 0 0 0 $loader-color,
      $third 0 0 0 $loader-color,
      $fourth 0 0 0 $loader-color,
      $fifth 0 0 0 $loader-color
  70%
    box-shadow $first 0 0 $hide $loader-color,
      $second 0 0 $hide $loader-color,
      $third 0 0 0 $loader-color,
      $fourth 0 0 0 $loader-color,
      $fifth 0 0 0 $loader-color
  80%
    box-shadow $first 0 0 $hide $loader-color,
      $second 0 0 $hide $loader-color,
      $third 0 0 $hide $loader-color,
      $fourth 0 0 0 $loader-color,
      $fifth 0 0 0 $loader-color
  90%
    box-shadow $first 0 0 $hide $loader-color,
      $second 0 0 $hide $loader-color,
      $third 0 0 $hide $loader-color,
      $fourth 0 0 $hide $loader-color,
      $fifth 0 0 0 $loader-color
  100%
    box-shadow $first 0 0 $hide $loader-color,
      $second 0 0 $hide $loader-color,
      $third 0 0 $hide $loader-color,
      $fourth 0 0 $hide $loader-color,
      $fifth 0 0 $hide $loader-color
    
    
@keyframes square
  0%
    box-shadow $first 0 0 $hide $loader-color,
      $second $first 0 $hide $loader-color,
      $second (-1 * $first) 0 $hide $loader-color,
      $second 0 0 $hide $loader-color,
      $third (-1 * $second) 0 $hide $loader-color,
      $third (-1 * $first) 0 $hide $loader-color,
      $third 0 0 $hide $loader-color,
      $third $first 0 $hide $loader-color,
      $third $second 0 $hide $loader-color,
      $fourth $first 0 $hide $loader-color,
      $fourth 0 0 $hide $loader-color,
      $fourth (-1 * $first) 0 $hide $loader-color,    
      $fifth 0 0 $hide $loader-color
  10%
    box-shadow $first 0 0 0 $loader-color,
      $second $first 0 $hide $loader-color,
      $second (-1 * $first) 0 $hide $loader-color,
      $second 0 0 $hide $loader-color,
      $third (-1 * $second) 0 $hide $loader-color,
      $third (-1 * $first) 0 $hide $loader-color,
      $third 0 0 $hide $loader-color,
      $third $first 0 $hide $loader-color,
      $third $second 0 $hide $loader-color,
      $fourth $first 0 $hide $loader-color,
      $fourth 0 0 $hide $loader-color,
      $fourth (-1 * $first) 0 $hide $loader-color,    
      $fifth 0 0 $hide $loader-color
  20%
    box-shadow $first 0 0 0 $loader-color,
      $second $first 0 0 $loader-color,
      $second (-1 * $first) 0 0 $loader-color,
      $second 0 0 0 $loader-color,
      $third (-1 * $second) 0 $hide $loader-color,
      $third (-1 * $first) 0 $hide $loader-color,
      $third 0 0 $hide $loader-color,
      $third $first 0 $hide $loader-color,
      $third $second 0 $hide $loader-color,
      $fourth $first 0 $hide $loader-color,
      $fourth 0 0 $hide $loader-color,
      $fourth (-1 * $first) 0 $hide $loader-color,    
      $fifth 0 0 $hide $loader-color 
  30%
    box-shadow $first 0 0 0 $loader-color,
      $second $first 0 0 $loader-color,
      $second (-1 * $first) 0 0 $loader-color,
      $second 0 0 0 $loader-color,
      $third (-1 * $second) 0 0 $loader-color,
      $third (-1 * $first) 0 0 $loader-color,
      $third 0 0 0 $loader-color,
      $third $first 0 0 $loader-color,
      $third $second 0 0 $loader-color,
      $fourth $first 0 $hide $loader-color,
      $fourth 0 0 $hide $loader-color,
      $fourth (-1 * $first) 0 $hide $loader-color,    
      $fifth 0 0 $hide $loader-color
  40%
    box-shadow $first 0 0 0 $loader-color,
      $second $first 0 0 $loader-color,
      $second (-1 * $first) 0 0 $loader-color,
      $second 0 0 0 $loader-color,
      $third (-1 * $second) 0 0 $loader-color,
      $third (-1 * $first) 0 0 $loader-color,
      $third 0 0 0 $loader-color,
      $third $first 0 0 $loader-color,
      $third $second 0 0 $loader-color,
      $fourth $first 0 0 $loader-color,
      $fourth 0 0 0 $loader-color,
      $fourth (-1 * $first) 0 0 $loader-color,    
      $fifth 0 0 $hide $loader-color
  50%
    box-shadow $first 0 0 0 $loader-color,
      $second $first 0 0 $loader-color,
      $second (-1 * $first) 0 0 $loader-color,
      $second 0 0 0 $loader-color,
      $third (-1 * $second) 0 0 $loader-color,
      $third (-1 * $first) 0 0 $loader-color,
      $third 0 0 0 $loader-color,
      $third $first 0 0 $loader-color,
      $third $second 0 0 $loader-color,
      $fourth $first 0 0 $loader-color,
      $fourth 0 0 0 $loader-color,
      $fourth (-1 * $first) 0 0 $loader-color,    
      $fifth 0 0 0 $loader-color
  60%
    box-shadow $first 0 0 $hide $loader-color,
      $second $first 0 0 $loader-color,
      $second (-1 * $first) 0 0 $loader-color,
      $second 0 0 0 $loader-color,
      $third (-1 * $second) 0 0 $loader-color,
      $third (-1 * $first) 0 0 $loader-color,
      $third 0 0 0 $loader-color,
      $third $first 0 0 $loader-color,
      $third $second 0 0 $loader-color,
      $fourth $first 0 0 $loader-color,
      $fourth 0 0 0 $loader-color,
      $fourth (-1 * $first) 0 0 $loader-color,    
      $fifth 0 0 0 $loader-color
  70%
    box-shadow $first 0 0 $hide $loader-color,
      $second $first 0 $hide $loader-color,
      $second (-1 * $first) 0 $hide $loader-color,
      $second 0 0 $hide $loader-color,
      $third (-1 * $second) 0 0 $loader-color,
      $third (-1 * $first) 0 0 $loader-color,
      $third 0 0 0 $loader-color,
      $third $first 0 0 $loader-color,
      $third $second 0 0 $loader-color,
      $fourth $first 0 0 $loader-color,
      $fourth 0 0 0 $loader-color,
      $fourth (-1 * $first) 0 0 $loader-color,    
      $fifth 0 0 0 $loader-color
  80%
    box-shadow $first 0 0 $hide $loader-color,
      $second $first 0 $hide $loader-color,
      $second (-1 * $first) 0 $hide $loader-color,
      $second 0 0 $hide $loader-color,
      $third (-1 * $second) 0 $hide $loader-color,
      $third (-1 * $first) 0 $hide $loader-color,
      $third 0 0 $hide $loader-color,
      $third $first 0 $hide $loader-color,
      $third $second 0 $hide $loader-color,
      $fourth $first 0 0 $loader-color,
      $fourth 0 0 0 $loader-color,
      $fourth (-1 * $first) 0 0 $loader-color,    
      $fifth 0 0 0 $loader-color
  90%
    box-shadow $first 0 0 $hide $loader-color,
      $second $first 0 $hide $loader-color,
      $second (-1 * $first) 0 $hide $loader-color,
      $second 0 0 $hide $loader-color,
      $third (-1 * $second) 0 $hide $loader-color,
      $third (-1 * $first) 0 $hide $loader-color,
      $third 0 0 $hide $loader-color,
      $third $first 0 $hide $loader-color,
      $third $second 0 $hide $loader-color,
      $fourth $first 0 $hide $loader-color,
      $fourth 0 0 $hide $loader-color,
      $fourth (-1 * $first) 0 $hide $loader-color,    
      $fifth 0 0 0 $loader-color
  100%
    box-shadow $first 0 0 $hide $loader-color,
      $second $first 0 $hide $loader-color,
      $second (-1 * $first) 0 $hide $loader-color,
      $second 0 0 $hide $loader-color,
      $third (-1 * $second) 0 $hide $loader-color,
      $third (-1 * $first) 0 $hide $loader-color,
      $third 0 0 $hide $loader-color,
      $third $first 0 $hide $loader-color,
      $third $second 0 $hide $loader-color,
      $fourth $first 0 $hide $loader-color,
      $fourth 0 0 $hide $loader-color,
      $fourth (-1 * $first) 0 $hide $loader-color,    
      $fifth 0 0 $hide $loader-color
    
@keyframes snake
  0%
  5%
    box-shadow $first $first 0 $hide $loader-color,
      $second $first 0 $hide $loader-color,
      $third $first 0 $hide $loader-color,
      $third 0 0 $hide $loader-color,
      $third (-1 * $first) 0 $hide $loader-color,
      $second (-1 * $first) 0 $hide $loader-color,
      $first (-1 * $first) 0 $hide $loader-color,
      $first 0 0 $hide $loader-color,
      $second 0 0 $hide $loader-color
  10%
    box-shadow $first $first 0 0 $loader-color,
      $second $first 0 $hide $loader-color,
      $third $first 0 $hide $loader-color,
      $third 0 0 $hide $loader-color,
      $third (-1 * $first) 0 $hide $loader-color,
      $second (-1 * $first) 0 $hide $loader-color,
      $first (-1 * $first) 0 $hide $loader-color,
      $first 0 0 $hide $loader-color,
      $second 0 0 $hide $loader-color
  15%
    box-shadow $first $first 0 0 $loader-color,
      $second $first 0 0 $loader-color,
      $third $first 0 $hide $loader-color,
      $third 0 0 $hide $loader-color,
      $third (-1 * $first) 0 $hide $loader-color,
      $second (-1 * $first) 0 $hide $loader-color,
      $first (-1 * $first) 0 $hide $loader-color,
      $first 0 0 $hide $loader-color,
      $second 0 0 $hide $loader-color
  20%
    box-shadow $first $first 0 0 $loader-color,
      $second $first 0 0 $loader-color,
      $third $first 0 0 $loader-color,
      $third 0 0 $hide $loader-color,
      $third (-1 * $first) 0 $hide $loader-color,
      $second (-1 * $first) 0 $hide $loader-color,
      $first (-1 * $first) 0 $hide $loader-color,
      $first 0 0 $hide $loader-color,
      $second 0 0 $hide $loader-color
  25%
    box-shadow $first $first 0 0 $loader-color,
      $second $first 0 0 $loader-color,
      $third $first 0 0 $loader-color,
      $third 0 0 0 $loader-color,
      $third (-1 * $first) 0 $hide $loader-color,
      $second (-1 * $first) 0 $hide $loader-color,
      $first (-1 * $first) 0 $hide $loader-color,
      $first 0 0 $hide $loader-color,
      $second 0 0 $hide $loader-color
  30%
    box-shadow $first $first 0 0 $loader-color,
      $second $first 0 0 $loader-color,
      $third $first 0 0 $loader-color,
      $third 0 0 0 $loader-color,
      $third (-1 * $first) 0 0 $loader-color,
      $second (-1 * $first) 0 $hide $loader-color,
      $first (-1 * $first) 0 $hide $loader-color,
      $first 0 0 $hide $loader-color,
      $second 0 0 $hide $loader-color
  35%
    box-shadow $first $first 0 0 $loader-color,
      $second $first 0 0 $loader-color,
      $third $first 0 0 $loader-color,
      $third 0 0 0 $loader-color,
      $third (-1 * $first) 0 0 $loader-color,
      $second (-1 * $first) 0 0 $loader-color,
      $first (-1 * $first) 0 $hide $loader-color,
      $first 0 $hide $loader-color,
      $second 0 $hide $loader-color    
  40%
    box-shadow $first $first 0 0 $loader-color,
      $second $first 0 0 $loader-color,
      $third $first 0 0 $loader-color,
      $third 0 0 0 $loader-color,
      $third (-1 * $first) 0 0 $loader-color,
      $second (-1 * $first) 0 0 $loader-color,
      $first (-1 * $first) 0 0 $loader-color,
      $first 0 0 $hide $loader-color,
      $second 0 0 $hide $loader-color
  45%
    box-shadow $first $first 0 0 $loader-color,
      $second $first 0 0 $loader-color,
      $third $first 0 0 $loader-color,
      $third 0 0 0 $loader-color,
      $third (-1 * $first) 0 0 $loader-color,
      $second (-1 * $first) 0 0 $loader-color,
      $first (-1 * $first) 0 0 $loader-color,
      $first 0 0 0 $loader-color,
      $second 0 0 $hide $loader-color
  50%
    box-shadow $first $first 0 0 $loader-color,
      $second $first 0 0 $loader-color,
      $third $first 0 0 $loader-color,
      $third 0 0 0 $loader-color,
      $third (-1 * $first) 0 0 $loader-color,
      $second (-1 * $first) 0 0 $loader-color,
      $first (-1 * $first) 0 0 $loader-color,
      $first 0 0 0 $loader-color,
      $second 0 0 0 $loader-color
  55%
    box-shadow $first $first 0 $hide $loader-color,
      $second $first 0 0 $loader-color,
      $third $first 0 0 $loader-color,
      $third 0 0 0 $loader-color,
      $third (-1 * $first) 0 0 $loader-color,
      $second (-1 * $first) 0 0 $loader-color,
      $first (-1 * $first) 0 0 $loader-color,
      $first 0 0 0 $loader-color,
      $second 0 0 0 $loader-color
  60%
    box-shadow $first $first 0 $hide $loader-color,
      $second $first 0 $hide $loader-color,
      $third $first 0 0 $loader-color,
      $third 0 0 0 $loader-color,
      $third (-1 * $first) 0 0 $loader-color,
      $second (-1 * $first) 0 0 $loader-color,
      $first (-1 * $first) 0 0 $loader-color,
      $first 0 0 0 $loader-color,
      $second 0 0 0 $loader-color
  65%
    box-shadow $first $first 0 $hide $loader-color,
      $second $first 0 $hide $loader-color,
      $third $first 0 $hide $loader-color,
      $third 0 0 0 $loader-color,
      $third (-1 * $first) 0 0 $loader-color,
      $second (-1 * $first) 0 0 $loader-color,
      $first (-1 * $first) 0 0 $loader-color,
      $first 0 0 0 $loader-color,
      $second 0 0 0 $loader-color
  70%
    box-shadow $first $first 0 $hide $loader-color,
      $second $first 0 $hide $loader-color,
      $third $first 0 $hide $loader-color,
      $third 0 0 $hide $loader-color,
      $third (-1 * $first) 0 0 $loader-color,
      $second (-1 * $first) 0 0 $loader-color,
      $first (-1 * $first) 0 0 $loader-color,
      $first 0 0 0 $loader-color,
      $second 0 0 0 $loader-color    
  75%
    box-shadow $first $first 0 $hide $loader-color,
      $second $first 0 $hide $loader-color,
      $third $first 0 $hide $loader-color,
      $third 0 0 $hide $loader-color,
      $third (-1 * $first) 0 $hide $loader-color,
      $second (-1 * $first) 0 0 $loader-color,
      $first (-1 * $first) 0 0 $loader-color,
      $first 0 0 0 $loader-color,
      $second 0 0 0 $loader-color
  80%
    box-shadow $first $first 0 $hide $loader-color,
      $second $first 0 $hide $loader-color,
      $third $first 0 $hide $loader-color,
      $third 0 0 $hide $loader-color,
      $third (-1 * $first) 0 $hide $loader-color,
      $second (-1 * $first) 0 $hide $loader-color,
      $first (-1 * $first) 0 0 $loader-color,
      $first 0 0 0 $loader-color,
      $second 0 0 0 $loader-color
  85%
    box-shadow $first $first 0 $hide $loader-color,
      $second $first 0 $hide $loader-color,
      $third $first 0 $hide $loader-color,
      $third 0 0 $hide $loader-color,
      $third (-1 * $first) 0 $hide $loader-color,
      $second (-1 * $first) 0 $hide $loader-color,
      $first (-1 * $first) 0 $hide $loader-color,
      $first 0 0 0 $loader-color,
      $second 0 0 0 $loader-color
  90%
    box-shadow $first $first 0 $hide $loader-color,
      $second $first 0 $hide $loader-color,
      $third $first 0 $hide $loader-color,
      $third 0 0 $hide $loader-color,
      $third (-1 * $first) 0 $hide $loader-color,
      $second (-1 * $first) 0 $hide $loader-color,
      $first (-1 * $first) 0 $hide $loader-color,
      $first 0 0 $hide $loader-color,
      $second 0 0 0 $loader-color
  95%
  100%
    box-shadow $first $first 0 $hide $loader-color,
      $second $first 0 $hide $loader-color,
      $third $first 0 $hide $loader-color,
      $third 0 0 $hide $loader-color,
      $third (-1 * $first) 0 $hide $loader-color,
      $second (-1 * $first) 0 $hide $loader-color,
      $first (-1 * $first) 0 $hide $loader-color,
      $first 0 0 $hide $loader-color,
      $second 0 0 $hide $loader-color