Create AJAX Loading Animation with CSS3
Now we don’t have to rely on animated gifs in creating AJAX loading animation effects. This CSS3 tutorial will teach us how to create three different types of loading animation.
Let’s start off with our HTML markup.
HTML Markup
<div id='loading'>
<div id='Column1' class='Columns'></div>
<div id='Column2' class='Columns'></div>
<div id='Column3' class='Columns'></div>
<div id='Column4' class='Columns'></div>
<div id='Column5' class='Columns'></div>
<div id='Column6' class='Columns'></div>
</div>
|
Each <div class=’Columns’> basically represents each of the bars in our animated loader. Now on to CSS!
CSS Markup for the first loading animation
#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;
}
.Columns{
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 Columns is zero */
opacity:0;
/* Scale it to 0.8 in starting */
-webkit-transform:scale(0.8);
}
#Column1{
/* Column1 animation delay by .3 seconds */
-webkit-animation-delay: .3s;
}
#Column2{
/* Column2 animation delay by .4 seconds */
-webkit-animation-delay: .4s;
}
#Column3{
/* Column3 animation delay by .5 seconds */
-webkit-animation-delay: .5s;
}
#Column4{
/* Column4 animation delay by .6 seconds */
-webkit-animation-delay: .6s;
}
#Column5{
/* Column5 animation delay by .7 seconds */
-webkit-animation-delay: .7s;
}
#Column6{
/* Column6 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 Column will be 0 at beginning of animation */
0%{opacity:0;}
/* opacity of Column will be 1 at middle of animation */
50%{opacity:1;}
/* Back to opacity zero when animation completes its cycle */
100%{opacity:0;}
}
|
Second loading animation CSS Markup
#loading1{
margin-top:30px;
float:left;
margin-left:30px;
}
.Columns1{
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);
}
#Column11{
-webkit-animation-delay: .3s;
}
#Column22{
-webkit-animation-delay: .4s;
}
#Column33{
-webkit-animation-delay: .5s;
}
#Column44{
-webkit-animation-delay: .6s;
}
#Column55{
-webkit-animation-delay: .7s;
}
#Column66{
-webkit-animation-delay: .8s;
}
@-webkit-keyframes animation1{
0%{-webkit-transform: scale(.9);opacity:1;}
100%{-webkit-transform: scale(.2);opacity:0.1;}
}
|
Third loading animation CSS Markup
#loading2{
margin-top:30px; float:left; margin-left:30px; } .Columns2{
-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; } #Column111{
-webkit-animation-delay: .1s; } #Column222{
-webkit-animation-delay: .3s; } #Column333{
-webkit-animation-delay: .5s; } #Column444{
-webkit-animation-delay: .7s; } @-webkit-keyframes animation2{
0%{opacity:0;}
50%{opacity:1;}
100%{opacity:0;}
} |
Pretty short, quick, and easy, isn’t it? Have fun using it in your website!
0
505
