Ajax Style Loading Animation in CSS3

As we all know loading images are very essential part of any website , but some time loading images takes time to load itself. But what if the images made up in CSS. So this time I used CSS3 to develop Ajax style loading animation.
Below I have attached the snapshot , to view the original output please visit DEMO.

Now let go through the code.

Facebook style

HTML

 <div id='facebook' >
             <div id='block_1' class='facebook_block'></div>
             <div id='block_2' class='facebook_block'></div>
             <div id='block_3' class='facebook_block'></div>
</div>

CSS

#facebook{
	margin-top:30px;
	float:left;
}
.facebook_block{
	background-color:#9FC0FF;
	border:2px solid #3B5998;
	float:left;
	height:30px;
	margin-left:5px;
	width:8px;
        opacity:0.1;
	-webkit-transform:scale(0.7);
	-webkit-animation-name: facebook;
 	-webkit-animation-duration: 1s;
 	-webkit-animation-iteration-count: infinite;
 	-webkit-animation-direction: linear;

	}
#block_1{
 	-webkit-animation-delay: .3s;
 }
#block_2{
 	-webkit-animation-delay: .4s;
}
#block_3{
 	-webkit-animation-delay: .5s;
}
@-webkit-keyframes facebook{
	0%{-webkit-transform: scale(1.2);opacity:1;}
	100%{-webkit-transform: scale(0.7);opacity:0.1;}
}

here I have given only facebook style loading image source code.Hope you guys like these loading animations.Please don’t forget to drop your comments.

If you liked my post then,

Click here to Subscribe to FREE email updates from "itrickz", so that you do not miss out anything that can be valuable to you and your blog!!