#Loaders Loading!

#Loaders-Loading!.markdown

#Loaders Loading!

Just made some random loaders! btw, visit the link.. XD

A Pen by Abhijit Hota on CodePen.

License.

index.haml

%div.container
 - (1...10).each do |i|
  .cubes 
  
%div.container
 - (1...10).each do |i|
  .before 
  
%div.container
 - (1...10).each do |i|
  .after
  
%div.container
 - (1...10).each do |i|
  .groove 
  
.container
 .spinner



%br 
 %span.first Loaders Loading!
 %br/
 %a{:href => "http://www.patience-is-a-virtue.org/"} Patience is a virtue!
  

script.js

//colors from: coolors.co 
//they make awesome colors XD
//fonts from google

// visit the link!
//time pass XD
// http://www.patience-is-a-virtue.org/

style.scss

//important vars!
$n:10;//play??
//fonts!
@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);
@import url(http://fonts.googleapis.com/css?family=Lobster);
//the body
body{
  background:#EBC588;
  text-align:center;
}

//containers
//dont play with 'em please!
.container{
  height:150px;
  width:170px;
  position:relative;
  margin:50px 10px;
  display:inline-block;
}

//unity

.cubes, .before, .after, .groove{
  background:#2c3e50;
  height:50px;
  width:50px;
  -webkit-animation: load 2s infinite;
  animation: load 2s infinite;
  margin:auto;
  display:inline-block;
 //the XD Part!! XD containerS!!
  @for $i from 0 to $n {
  &:nth-child(#{$i + 1}) {
      -webkit-animation-delay:($i* 1s / $n);
    -o-animation-delay:($i* 1s / $n);
     -moz-animation-delay:($i* 1s / $n);
     -animation-delay:($i* 1s / $n);
}
}
}
//animation
//all by scaling
@-webkit-keyframes load{
  0%{transform:scale(0.1);}
  50%{transform:scale(1);}
  100%{transform:scale(0.1);}
}
@keyframes load{
  0%{transform:scale(0.1);}
  50%{transform:scale(1);}
  100%{transform:scale(0.1);}
}
//diversity
.before{
  width:10px;
  height:100px;
  margin-top:45px;
}

.after{
  width:100px;
  height:10px;
}
.groove{
  border-radius:50%;
}
.spinner{
  border:90px double ;
top:40px;
  border-color:#EBC588 #2c3e50;
  border-radius:50%;
  -webkit-animation: load2 1.5s infinite;
  animation: load2 1.5s infinite;
}
@-webkit-keyframes load2{
  50%{transform:rotate(360deg);}
}
@keyframes load2{
  50%{transform:rotate(360deg);}
}

//text part!!
//please visit the link! :P
.first{
  font-family: 'Open Sans Condensed', sans-serif;
  font-size:60px;
  color:#2c3e50;
}
a{
  text-decoration:none;
  color:#2c3e50;
  font-family: 'Lobster', cursive;
  font-size:40px;
  opacity: 0.6;
  &:hover{
    opacity:1;
  }
}

//ta-da ! :) 
//thank you!