CSS3:Facebook-style loading

fb-loading.html

<style>
#facebookG{
}

.facebook_blockG{
background-color:#FFFFFF;
border:1px solid #000000;
float:left;
height:91px;
margin-left:5px;
width:24px;
-webkit-animation-name:bounceG;
-webkit-animation-duration:2s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:linear;
-webkit-transform:scale(1.4);
-moz-animation-name:bounceG;
-moz-animation-duration:1s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:linear;
-moz-transform:scale(1.4);
-o-animation-name:bounceG;
-o-animation-duration:2s;
-o-animation-iteration-count:infinite;
-o-animation-direction:linear;
-o-transform:scale(1.4);
-ms-animation-name:bounceG;
-ms-animation-duration:2s;
-ms-animation-iteration-count:infinite;
-ms-animation-direction:linear;
-ms-transform:scale(1.4);
opacity:0.1;
}

#blockG_1{
-webkit-animation-delay:0.3s;
-moz-animation-delay:0.3s;
-o-animation-delay:0.3s;
-ms-animation-delay:0.3s;
}

#blockG_2{
-webkit-animation-delay:0.4s;
-moz-animation-delay:0.4s;
-o-animation-delay:0.4s;
-ms-animation-delay:0.4s;
}

#blockG_3{
-webkit-animation-delay:0.5s;
-moz-animation-delay:0.5s;
-o-animation-delay:0.5s;
-ms-animation-delay:0.5s;
}

@-webkit-keyframes bounceG{
0%{
-webkit-transform:scale(1.2);
opacity:1}

100%{
-webkit-transform:scale(0.7);
opacity:0.1}

}

@-moz-keyframes bounceG{
0%{
-moz-transform:scale(1.2);
opacity:1}

100%{
-moz-transform:scale(0.7);
opacity:0.1}

}

@-o-keyframes bounceG{
0%{
-o-transform:scale(1.2);
opacity:1}

100%{
-o-transform:scale(0.7);
opacity:0.1}

}

@-ms-keyframes bounceG{
0%{
-ms-transform:scale(1.2);
opacity:1}

100%{
-ms-transform:scale(0.7);
opacity:0.1}

}

</style>
<div id="facebookG">
<div id="blockG_1" class="facebook_blockG">
</div>
<div id="blockG_2" class="facebook_blockG">
</div>
<div id="blockG_3" class="facebook_blockG">
</div>
</div>