Equalizes the loader

Equalizes the loader.markdown

Equalizes the loader

Use of animation based on border-width only + the useful Sass loop to delay all our components. Equalizer style!

A Pen by Caohim on CodePen.

License.

index.html

link(href="http://fonts.googleapis.com/css?family=Merriweather+Sans:700",  rel="stylesheet", type="text/css")

div.quiver
  span.arrows.st
  span.arrows.nd
  span.arrows.rd
  span.arrows.th
  span.arrows.fth
  span.loading Loading

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

@import compass

.quiver
  position: fixed
  bottom: 50%
  left: 50%
  z-index: 899
  margin-bottom: -50px
  margin-left: -50px
  width: 100px
.arrows
  @include animation(equalizor cubic-bezier(0.77, 0, 0.175, 1) .5s alternate-reverse infinite)
  vertical-align: baseline
  display: inline-block
  width: 0
  height: 0
  border-style: solid
  border-width: 0 10px 1px 10px
  border-color: rgba(255,255,255,0) rgba(255,255,255,0) #0B486B rgba(255,255,255,0)
.st
  border-bottom-color: #0B486B
.nd
  border-bottom-color: #3B8686
.rd
  border-bottom-color: #79BD9A
.th
  border-bottom-color: #A8DBA8
.fth
  border-bottom-color: #CFF09E
  
@for $i from 1 through 5 
  span 
    &:nth-child(#{$i})
      @include animation-delay(#{(($i)-1)/10}s)


// Anim
@include keyframes(equalizor)
  from
    border-bottom-width: 60px
  to
    border-bottom-width: 1px
  

// Misc
*
  @include backface-visibility(hidden)
html, body
  background-color: #141517
  height: 100%
  margin: 0
.loading
  display: block
  font: normal 22px/1em "Merriweather Sans", sans-serif
  text-transform: uppercase
  color: #CFF09E
  
// Credits
// Gorgeous colour palette by Skyblue2u on COLOURlovers
// http://www.colourlovers.com/palette/580974/Adrift_in_Dreams