/* Loading Circle */  
.ball {  
background-color: rgba(0, 0, 0, 0);  
border:5px solid rgba(0, 183, 229, 0.9);  
opacity:.9;  
border-top:5px solid rgba(0, 0, 0, 0);  
border-left:5px solid rgba(0, 0, 0, 0);  
border-radius:50px;  
box-shadow: 0 0 35px #2187e7;  
width:50px;  
height:50px;  
margin:0 auto;  
-moz-animation:spin .5s infinite linear;  
-webkit-animation:spin .5s infinite linear;  
  }  
  .ball1 {  
background-color: rgba(0, 0, 0, 0);  
border:5px solid rgba(0, 183, 229, 0.9);  
opacity:.9;  
border-top:5px solid rgba(0, 0, 0, 0);  
border-left:5px solid rgba(0, 0, 0, 0);  
border-radius:50px;  
box-shadow: 0 0 15px #2187e7;  
width:30px;  
height:30px;  
margin:0 auto;  
position:relative;  
top:-50px;  
-moz-animation:spinoff .5s infinite linear;  
-webkit-animation:spinoff .5s infinite linear;  
  }  
  @-moz-keyframes spin {  
0% {  
-moz-transform:rotate(0deg);  
}  
100% {  
-moz-transform:rotate(360deg);  
}  
  }  
  @-moz-keyframes spinoff {  
0% {  
-moz-transform:rotate(0deg);  
}  
100% {  
-moz-transform:rotate(-360deg);  
}  
  }  
  @-webkit-keyframes spin {  
0% {  
-webkit-transform:rotate(0deg);  
}  
100% {  
-webkit-transform:rotate(360deg);  
}  
  }  
  @-webkit-keyframes spinoff {  
0% {  
-webkit-transform:rotate(0deg);  
}  
100% {  
-webkit-transform:rotate(-360deg);  
}  
  }  
  /* Second Loadin Circle */  
.circle {  
background-color: rgba(0, 0, 0, 0);  
border:5px solid rgba(0, 183, 229, 0.9);  
opacity:.9;  
border-right:5px solid rgba(0, 0, 0, 0);  
border-left:5px solid rgba(0, 0, 0, 0);  
border-radius:50px;  
box-shadow: 0 0 35px #2187e7;  
width:50px;  
height:50px;  
margin:0 auto;  
-moz-animation:spinPulse 1s infinite ease-in-out;  
-webkit-animation:spinPulse 1s infinite linear;  
  }  
  .circle1 {  
background-color: rgba(0, 0, 0, 0);  
border:5px solid rgba(0, 183, 229, 0.9);  
opacity:.9;  
border-left:5px solid rgba(0, 0, 0, 0);  
border-right:5px solid rgba(0, 0, 0, 0);  
border-radius:50px;  
box-shadow: 0 0 15px #2187e7;  
width:30px;  
height:30px;  
margin:0 auto;  
position:relative;  
top:-50px;  
-moz-animation:spinoffPulse 1s infinite linear;  
-webkit-animation:spinoffPulse 1s infinite linear;  
  }  
  @-moz-keyframes spinPulse {  
0% {  
-moz-transform:rotate(160deg);  
opacity:0;  
box-shadow:0 0 1px #2187e7;  
}  
50% {  
-moz-transform:rotate(145deg);  
opacity:1;  
}  
100% {  
-moz-transform:rotate(-320deg);  
opacity:0;  
}  
  }  
  @-moz-keyframes spinoffPulse {  
0% {  
-moz-transform:rotate(0deg);  
}  
100% {  
-moz-transform:rotate(360deg);  
}  
  }  
  @-webkit-keyframes spinPulse {  
0% {  
-webkit-transform:rotate(160deg);  
opacity:0;  
box-shadow:0 0 1px #2187e7;  
}  
50% {  
-webkit-transform:rotate(145deg);  
opacity:1;  
}  
100% {  
-webkit-transform:rotate(-320deg);  
opacity:0;  
}  
  }  
  @-webkit-keyframes spinoffPulse {  
0% {  
-webkit-transform:rotate(0deg);  
}  
100% {  
-webkit-transform:rotate(360deg);  
}  
  }  
  /* LITTLE BAR */  
  .contentBar {  
margin:0px auto;  
width:85px;  
  }  
.barlittle {  
background-color:#2187e7;  
background-image: -moz-linear-gradient(45deg, #2187e7 25%, #a0eaff);  
background-image: -webkit-linear-gradient(45deg, #2187e7 25%, #a0eaff);  
border-left:1px solid #111;  
border-top:1px solid #111;  
border-right:1px solid #333;  
border-bottom:1px solid #333;  
width:10px;  
height:10px;  
float:left;  
margin-left:5px;  
opacity:0.1;  
-moz-transform:scale(0.7);  
-webkit-transform:scale(0.7);  
-moz-animation:move 1s infinite linear;  
-webkit-animation:move 1s infinite linear;  
  }  
  #block_1 {  
-moz-animation-delay: .4s;  
-webkit-animation-delay: .4s;  
  }  
  #block_2 {  
-moz-animation-delay: .3s;  
-webkit-animation-delay: .3s;  
  }  
  #block_3 {  
-moz-animation-delay: .2s;  
-webkit-animation-delay: .2s;  
  }  
  #block_4 {  
-moz-animation-delay: .3s;  
-webkit-animation-delay: .3s;  
  }  
  #block_5 {  
-moz-animation-delay: .4s;  
-webkit-animation-delay: .4s;  
  }  
  @-moz-keyframes move {  
0% {  
-moz-transform: scale(1.2);  
opacity:1;  
}  
100% {  
-moz-transform: scale(0.7);  
opacity:0.1;  
}  
  }  
  @-webkit-keyframes move {  
0% {  
-webkit-transform: scale(1.2);  
opacity:1;  
}  
100% {  
-webkit-transform: scale(0.7);  
opacity:0.1;  
}  
  }

<div class="container">  
<div class="content">  
<div class="ball"></div>  
<div class="ball1"></div>  
</div>  
  </div>

<div class="container">  
<div class="content">  
<div class="circle"></div>  
<div class="circle1"></div>  
</div>  
  </div>

<div class="container">  
<div class="contentBar">  
<div id="block_1" class="barlittle"></div>  
<div id="block_2" class="barlittle"></div>  
<div id="block_3" class="barlittle"></div>  
<div id="block_4" class="barlittle"></div>  
<div id="block_5" class="barlittle"></div>  
</div>  
  </div>