TER Custom CSS Preloader See more at: http://cssload.net/#sthash.ir9Bnvw3.dpuf

ter-custom-preloader.inc.html

<style>
#fountainG{
position:relative;
width:240px;
height:29px}

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

#fountainG_1{
left:0;
-moz-animation-delay:0.36s;
-webkit-animation-delay:0.36s;
-o-animation-delay:0.36s;
-ms-animation-delay:0.36s;
animation-delay:0.36s;
}

#fountainG_2{
left:30px;
-moz-animation-delay:0.45s;
-webkit-animation-delay:0.45s;
-o-animation-delay:0.45s;
-ms-animation-delay:0.45s;
animation-delay:0.45s;
}

#fountainG_3{
left:60px;
-moz-animation-delay:0.54s;
-webkit-animation-delay:0.54s;
-o-animation-delay:0.54s;
-ms-animation-delay:0.54s;
animation-delay:0.54s;
}

#fountainG_4{
left:90px;
-moz-animation-delay:0.63s;
-webkit-animation-delay:0.63s;
-o-animation-delay:0.63s;
-ms-animation-delay:0.63s;
animation-delay:0.63s;
}

#fountainG_5{
left:120px;
-moz-animation-delay:0.72s;
-webkit-animation-delay:0.72s;
-o-animation-delay:0.72s;
-ms-animation-delay:0.72s;
animation-delay:0.72s;
}

#fountainG_6{
left:150px;
-moz-animation-delay:0.81s;
-webkit-animation-delay:0.81s;
-o-animation-delay:0.81s;
-ms-animation-delay:0.81s;
animation-delay:0.81s;
}

#fountainG_7{
left:180px;
-moz-animation-delay:0.9s;
-webkit-animation-delay:0.9s;
-o-animation-delay:0.9s;
-ms-animation-delay:0.9s;
animation-delay:0.9s;
}

#fountainG_8{
left:210px;
-moz-animation-delay:0.99s;
-webkit-animation-delay:0.99s;
-o-animation-delay:0.99s;
-ms-animation-delay:0.99s;
animation-delay:0.99s;
}

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

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

}

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

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

}

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

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

}

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

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

}

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

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

}

</style>
<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>