Before CSS3 comes into act preloaders are implemented using only javascript, but after CSS3 it’s easy to implement preloaders with CSS style. Preloaders are used in many places, which does not allow visitors to move away frm the website. This can be seen in many of the flash websites. 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’s 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.