.container
  -n = 1
  while (n <= 8)
    .loader.top(class="color-#{n++}")
      .left
      .middle
      .right
      
  -n = 1
  while (n <= 8)
    .loader.shadow.bottom(class="color-#{n++}")
      .left
      .middle
      .right

span#credits
  i.mdi.mdi-xml
  |with
  i.mdi.mdi-heart
  |by
  a(href="https://codepen.io/GuiCavi/" target="_blank")
    i.mdi.mdi-codepen

@import compass
@import color-schemer

$start-color: #fff

$colors: (color1: #26CCCC, color2: #9B31D5, color3: #FFFF2F, color4: #FF8D2F, color5: #86F12D, color6: #4343D9, color7: #FFE02F, color8: #F12D68)

%center
  display: flex
  align-items: center
  justify-content: center

*, *::before, *::after
  +box-sizing(border-box)

html
  height: 100%
body
  @extend %center
  min-height: 100%
  background-color: #123456

$width: 20px
$height: 60px
$animation-time: .6s
$animation-delay: $animation-time - 0.5s

.container
  +box-shadow(0 2px 2px #000)
  display: flex
  flex-wrap: wrap
  width: 800px
  align-items: center
  justify-content: space-around
  background-color: #333

.loader
  margin: 30px 0
  flex: 0 0 100px
  text-align: center
  &.shadow
    .left, .middle, .right
      +box-shadow(inset 1px 1px 2px #000)
  &.top
    .left, .middle, .right
      transform-origin: top
  &.bottom
    .left, .middle, .right
      transform-origin: bottom    
  $i: 1
  @each $theme, $color in $colors
    $c: map-get($colors, 'color#{$i}')
    &.color-#{$i}
      .left, .middle, .right
        background-color: rgba($c, 0.2)
        border-color: $c
    $i: $i + 1

.left, .middle, .right
  +transform(scaleY(0.8))
  display: inline-block
  width: $width
  height: $height
  background-color: rgba($start-color, 0.2)
  border: 2px solid $start-color
.left
  +animation(loadLeft $animation-time ease infinite)
.middle
  +animation(loadMiddle $animation-time $animation-delay ease infinite)
.right
  +animation(loadRight $animation-time ($animation-delay*2) ease infinite)
    
+keyframes(loadLeft)
  0%, 100%
    +transform(scaleY(0.8))
  50%
    +transform(scaleY(1.2))
    
+keyframes(loadMiddle)
  0%, 100%
    +transform(scaleY(0.8))
  50%
    +transform(scaleY(1.2))
    
+keyframes(loadRight)
  0%, 100%
    +transform(scaleY(0.8))
  50%
    +transform(scaleY(1.2))
  
#credits
  +text-shadow(1px 1px 2px #222)
  position: fixed
  bottom: 10px
  right: 10px
  font-size: 14px
  line-height: 1.8
  color: #fff
  i.mdi
    font-size: 28px
    vertical-align: middle
    margin: 0 10px
    &.mdi-heart
      color: #FF432F
    &.mdi-codepen
      color: #2AE052
    &.mdi-xml
      color: #FFE02F