link(href="https://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
View Compiled
@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
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js