RecordSure Loading Bar

by tonytlwu

HTML

<div id="fountainG">
      <div id="fountainG_1" class="fountainG">
      </div>
      <div id="fountainG_2" class="fountainG">
      </div>
      <div id="fountainG_3" class="fountainG">
      </div>
      <div id="fountainG_4" class="fountainG">
      </div>
      <div id="fountainG_5" class="fountainG">
      </div>
      <div id="fountainG_6" class="fountainG">
      </div>
      <div id="fountainG_7" class="fountainG">
      </div>
      <div id="fountainG_8" class="fountainG">
      </div>
    </div>

CSS

html, body {
  width: 100%;
  height: 100%;
  position: relative;
}

#fountainG{
position:absolute;
width:240px;
height:29px;
  top: 50%;
  left: 50%;
  margin-top: -14px;
  margin-left: -120px;
}

.fountainG{
position:absolute;
top:0;
background-color:#78288e;
width:29px;
height:29px;
-webkit-animation-name:bounce_fountainG;
-webkit-animation-duration:1.3s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:linear;
-webkit-transform:scale(.3);
-webkit-border-radius:19px;
animation-name:bounce_fountainG;
animation-duration:1.3s;
animation-iteration-count:infinite;
animation-direction:linear;
transform:scale(.3);
border-radius:19px;
}

#fountainG_1{
left:0;
-webkit-animation-delay:0.52s;
animation-delay:0.52s;
}

#fountainG_2{
left:30px;
-webkit-animation-delay:0.65s;
animation-delay:0.65s;
}

#fountainG_3{
left:60px;
-webkit-animation-delay:0.78s;
animation-delay:0.78s;
}

#fountainG_4{
left:90px;
-webkit-animation-delay:0.91s;
animation-delay:0.91s;
}

#fountainG_5{
left:120px;
-webkit-animation-delay:1.04s;
animation-delay:1.04s;
}

#fountainG_6{
left:150px;
-webkit-animation-delay:1.17s;
animation-delay:1.17s;
}

#fountainG_7{
left:180px;
-webkit-animation-delay:1.3s;
animation-delay:1.3s;
}

#fountainG_8{
left:210px;
-webkit-animation-delay:1.43s;
animation-delay:1.43s;
}

@-webkit-keyframes bounce_fountainG{
0%{
-webkit-transform:scale(1);
background-color:#78288e;
}

100%{
-webkit-transform:scale(.3);
background-color:#FFFFFF;
}

}

@keyframes bounce_fountainG{
0%{
transform:scale(1);
background-color:#78288e;
}

100%{
transform:scale(.3);
background-color:#FFFFFF;
}

}