h1 Pure css loader #3
h2 Inspired by Lukáš Straňák (via 
  a(href="https://dribbble.com/shots/2440492-App-loader", target="blank") dribble
  |)

ul.loader
  -for (var x = 1; x < 6; x++)
    li(class="item-" + x)

$background-color: hsl(0, 0, 15)

body
  background: $background-color
  font-family: sans-serif
h1, h2
  position: absolute
  left: 50%
  transform: translateX(-50%)
  color: hsl(0, 0, 100)
  text-transform: uppercase
  letter-spacing: 2px
h1
  top: 24px
  font-size: 12px
h2
  top: 44px
  font-size: 10px
  opacity: 0.7
  a
    color: hsl(0, 0, 100)
    text-decoration: none
    border-bottom: 1px dotted lighten($background-color, 50%)
  
    
    
// Loader vars
$loader-time: 1.4s
$item-size: 14px
$item-delay: 0s
    
.loader
  position: absolute
  height: 10px
  top: 50%
  left: 50%
  transform: translate(-50%, -50%)
@for $i from 1 through 5
  $item-delay: $item-delay + 0.1
  .item-#{$i}
    float: left
    width: $item-size
    margin: 0 ($item-size /3)
    border-radius: $item-size /2
    animation: anim $loader-time ease-in-out infinite $item-delay
    animation-fill-mode: backwards
    
@keyframes anim
  0%, 15%, 85%, 100%
    height: $item-size
    background: hsl(0, 0, 100)
    transform: translateY(0)
  30%, 70%
    height: $item-size *3
  41%, 59%
    height: $item-size
    background: hsl(300, 100, 30)
    transform: translateY(-$item-size*7)