A Pen by kaushalya.

Equalizer-loading-.markdown

Equalizer loading

Made with love and Pure css.

A Pen by kaushalya on CodePen.

License.

index.html

<div class="wrapper">
  <div class="dot-1"></div>
  <div class="dot-2"></div>
  <div class="dot-3"></div>
  <div class="dot-4"></div>
  <div class="dot-5"></div>
  <div class="dot-6"></div>
  <div class="dot-7"></div>
</div>
<div class="pause">Click To Pause</div>
<div class="kanu">By <a href="http://seebeetee.com">Kaushalya Mandaliya</a></div>

script.js

/*
 *
 *
 *
 *   
 *   2013 By Kaushalya R Mandaliya.
 *   https://twitter.com/kmandalwala
 *   http://seebeetee.com
 *
 *
 *
 */
$(".pause").click(function(){
  $(".dot-1, .dot-2, .dot-3, .dot-4, .dot-5, .dot-6, .dot-7").toggleClass("pauseit");
  
  if($(this).text().match("Pause")) {
    $(this).text("Click To Play"); 
  }
  else {
    $(this).text("Click To Pause"); 
  }
});

style.scss

@import "compass";
body {
  background: #34495e;
}

.wrapper {
  width: 5em;
  top: 50%;
  left: 43%;
  position: absolute;
}

@for $i from 1 through 7 {  
  .dot-#{$i} { 
    height: 2em;
    width: 0.7em;
    position: absolute;
    background: rgba(189,195,199,1);
    margin: 0.3em $i * 1em;
    animation: up 1.4s linear infinite;
    animation-delay: 0.2s * $i;
    bottom: 0;
    box-shadow: -10em 0 0.5em rgba(189,195,199,0.1),10em 0 0.5em rgba(189,195,199,0.1);
  }
}

@keyframes up {
  to {
    height: 5.2em;
  }
}

.pause {
  position: absolute;
  top: 0.5em;
  right: 0.5em;
  color: rgba(189,195,199,0.4);
  cursor: pointer;
}

.pauseit {
  animation-play-state: paused;
}

.kanu {
  position: absolute;
  bottom: 0.5em;
  right: 0.5em;
  color: rgba(189,195,199,0.4);
  
  a{
    color: inherit;
    text-decoration: none;
  }
}