Create Ajax Loading Animation with CSS3

May 30th

97 Comments

Normally Front end developers use gif animation for Ajax data loading. But now CSS3 animation property has been introduced and we can achieve the same Ajax loading animation effect using only css3 no gif animation required. So lets start working on it to get our desired effect.

Important : Only web kit based browser support (Safari and Chrome)

Check Out Demo

HTML

Here we will code only the first ajax loader which we shown in demo. So first of all we need to have a container named loading which holds all the elements of animation in it. Then we will define an individual div id’s to all the coloum with same class attribute.

<div id='loading'>
		<div id='coloumn1' class='coloumns'></div>
		<div id='coloumn2' class='coloumns'></div>
		<div id='coloumn3' class='coloumns'></div>
                <div id='coloumn4' class='coloumns'></div>
		<div id='coloumn5' class='coloumns'></div>
		<div id='coloumn6' class='coloumns'></div>
</div>

Now Style it and Animate it With CSS3

All codes with explanation below.

#loading{
	margin-top:30px;
	float:left;
	width:95px;
	height:32px;
	background-color:#779ec2;
	margin-left:30px;
	/* CSS3 Border  Radius for rounded corner */
	-webkit-border-radius: 5px;
   -moz-border-radius: 5px;
    border-radius: 5px;
}
.coloumns{
	background-color:#fff;
	border:1px solid #fff;
	float:left;
	height:30px;
	margin-left:5px;
	width:10px;
	/* Here we will define an animation name and then we will animate it later */
	-webkit-animation-name: animation;
	/* total time for animation to complete one cycle */
 	-webkit-animation-duration: 3s;
	/* Number of loops for animation cycle we set it infinite */
 	-webkit-animation-iteration-count: infinite;
 	-webkit-animation-direction: linear;
	/* Initially the opacity of coloumns is zero */
	opacity:0;
	/* Scale it to 0.8 in starting */
	-webkit-transform:scale(0.8);
	}
#coloumn1{
	/* Coloumn1 animation delay by .3 seconds */
 	-webkit-animation-delay: .3s;
 }
#coloumn2{
	/* Coloumn2 animation delay by .4 seconds */
 	-webkit-animation-delay: .4s;
}
#coloumn3{
	/* Coloumn3 animation delay by .5 seconds */
 	-webkit-animation-delay: .5s;
}
#coloumn4{
	/* Coloumn4 animation delay by .6 seconds */
 	-webkit-animation-delay: .6s;
 }
#coloumn5{
	/* Coloumn5 animation delay by .7 seconds */
 	-webkit-animation-delay: .7s;
}
#coloumn6{
	/* Coloumn6 animation delay by .8 seconds */
 	-webkit-animation-delay: .8s;
}
/* Earlier we have defined animation-name as animation now the animation properties will set here */
@-webkit-keyframes animation{
	/* opacity of coloumn will be 0 at beginning of animation */
	0%{opacity:0;}
	/* opacity of coloumn will be 1 at middle of animation */
	50%{opacity:1;}
	/* Back to opacity zero when animation completes its cycle */
	100%{opacity:0;}
}

CSS codes for Loading Animation 2 and 3.

#loading1{
	margin-top:30px;
	float:left;
	margin-left:30px;
}
.coloumns1{
	background-color:#39F;
	border:1px solid #00F;
	float:left;
	height:30px;
	margin-left:5px;
	width:8px;
	-webkit-animation-name: animation1;
 	-webkit-animation-duration: 2s;
 	-webkit-animation-iteration-count: infinite;
 	-webkit-animation-direction: linear;
	opacity:0.2;
	-webkit-transform:scale(0.6);
	}
#coloumn11{
 	-webkit-animation-delay: .3s;
 }
#coloumn22{
 	-webkit-animation-delay: .4s;
}
#coloumn33{
 	-webkit-animation-delay: .5s;
}
#coloumn44{
 	-webkit-animation-delay: .6s;
 }
#coloumn55{
 	-webkit-animation-delay: .7s;
}
#coloumn66{
 	-webkit-animation-delay: .8s;
}
@-webkit-keyframes animation1{
	0%{-webkit-transform: scale(.9);opacity:1;}
	100%{-webkit-transform: scale(.2);opacity:0.1;}
}
#loading2{
	margin-top:30px;
	float:left;
	margin-left:30px;
}
.coloumns2{
	-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
	background-color:#39F;
	float:left;
	height:20px;
	margin-left:5px;
	width:20px;
	-webkit-animation-name: animation2;
 	-webkit-animation-duration: 2s;
 	-webkit-animation-iteration-count: infinite;
 	-webkit-animation-direction: linear;
	opacity:0;
	}
#coloumn111{
 	-webkit-animation-delay: .1s;
 }
#coloumn222{
 	-webkit-animation-delay: .3s;
}
#coloumn333{
 	-webkit-animation-delay: .5s;
}
#coloumn444{
 	-webkit-animation-delay: .7s;
 }
@-webkit-keyframes animation2{
	0%{opacity:0;}
	50%{opacity:1;}
	100%{opacity:0;}
}

Let me know any bugs or improvement on this. Hope you enjoy it thank you.

If you are looking for fast success in adult web hosting Exams then join today to explore complete 640-721 resources and pass 70-681 certifications on first try. A person can chose pass4sure 70-620 & security+ certification for his easiness.