Submit your widget
HomeLayout & InterfaceAjax Style Loading Animation in CSS3 ( no Images )

Ajax Style Loading Animation in CSS3 ( no Images )

Created 14 years ago   Views 22004   downloads 3775    Author nikesh
Ajax Style Loading Animation in CSS3 ( no Images )
View DemoDownload
118
Share |

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.

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 cod

You might also like