.loading
  - (1..4).each do |i|
    .row
      - (1..4).each do |i|
        .point

@import compass

$red: #ca3737
$blue: #4cd4ee
$bgColor: #111

html
  height: 100%

body
  background: $bgColor
  position: relative
  width: 6em
  height: 100%
  margin: 0 auto
  

.loading
  width: 6em
  height: 5em
  position: absolute
  text-align: center
  top: 40%

.point
  width: .6em
  height: .6em
  border-radius: 50%
  margin: 0 .35em .6em
  display: inline-block

@for $i from 1 through 25
  .point:nth-child(#{$i})
    animation: color #{($i*100) + 1000}ms infinite ease-in-out

  .row:nth-child(#{$i})
    animation: opacity #{($i*100) + 1000}ms infinite ease-in-out

@keyframes opacity
  from, to
    opacity: 0
  50%
    opacity: 1

@keyframes color
  from, to
    background: $red
    -webkit-filter: blur(1px)
  50%
    background: $blue
    -webkit-filter: blur(2px)