CSS3 Animated Loading Icon

In this blog you will learn about CSS3 Animated Loading Icon.

CSS3 Animated Loading Icon 

 
Let us create css3 animated loading icons that are used to make a beautiful loading effect for your websites.
 
First, we will create a view,
  1. <div class="spinner">  
  2.     <div class="bounce1"></div>  
  3.     <div class="bounce2"></div>  
  4. </div>    
There is one Parent div having class name “spinner” and two child divs having class name “bounce1 and bounce2”.
 
Now its time to play with css3.
 
I will explain each class's properties. First, we will create style for the spinner (parent div),
  1. .spinner {  
  2.   height60px;  
  3.   width60px;  
  4.   positionrelative;  
  5.   margin100px 0;  
  6. }   
For child divs (bounce1 and bounce2) 
  1. .bounce1, .bounce2    
  2.             {    
  3.                 width: 100%;    
  4.                 height: 100%;    
  5.                 position: absolute;    
  6.                 top: 0px;    
  7.                 left: 0px;    
  8.                 background: #FFF;    
  9.                 opacity: 0.6;     
  10.                 -moz-animation: spinner 2.0s infinite ease-in-out;     
  11.                 animation: spinner 2.0s infinite ease-in-out;    
  12.             }    
Here I have used n animation property for the child divs. Animation name is “spinner” with delay “2.0s”. If we set a delay  for both, there won't be any difference in both children so we will set a different delays for both divs.
  1. bounce2    
  2.             {    
  3.                 animation-delay: -1.0s;    
  4.             }    
Now the bounce1 has 2.0s delay and bounce2 have -1.0s delay. You can see the difference while you are previewing the page. Now let us create the spinner animation :
  1. @keyframes spinner    
  2.             {    
  3.                 0%,100%{    
  4.                     transform: scale(0.0)    
  5.                 }    
  6.                 50%    
  7.                 {    
  8.                     transform: scale(1.0);    
  9.                 }    
  10.             }     
I am using transform: scale() property, it will scale the object(here divs) when it is 0, it will be none, I mean height:0 and width:0, when it is 1 the height and width will be 100% of parent div. Here the object will be scaled to 0% and 100%, between these it will scale 1 (50%). here the logic is while opening the page, first bounce1 will be scaled to 0 and it will increase the size (50% scaled to 1), and it will again scale to 0 (100%). meanwhile bounce2 will work opposite of this. When bounce1 is scaled to 0, bounce2 will be 1 and vice verca.
 
So the complete code is as follows,
  1. <html>  
  2.     <head>  
  3.         <title>-- CSS3 Animations --</title>  
  4.         <style>    
  5.             body    
  6.             {    
  7.                 background: #D60;    
  8.             }    
  9.             .spinner    
  10.             {    
  11.                 height: 60px;    
  12.                 width: 60px;    
  13.                 position: relative;    
  14.                 margin: 100px 0;    
  15.             }    
  16.             .bounce1, .bounce2    
  17.             {    
  18.                 width: 100%;    
  19.                 height: 100%;    
  20.                 position: absolute;    
  21.                 top: 0px;    
  22.                 left: 0px;    
  23.                 background: #FFF;    
  24.                 opacity: 0.6;    
  25.                 -moz-animation: spinner 2.0s infinite ease-in-out;     
  26.                 animation: spinner 2.0s infinite ease-in-out;    
  27.             }    
  28.             .bounce2    
  29.             {    
  30.                 animation-delay: -1.0s;    
  31.             }    
  32.             @keyframes spinner    
  33.             {    
  34.                 0%,100%{    
  35.                     transform: scale(0.0)    
  36.                 }    
  37.                 50%    
  38.                 {    
  39.                     transform: scale(1.0);    
  40.                 }    
  41.             }                
  42.         </style>  
  43.     </head>  
  44.     <div class="spinner">  
  45.         <div class="bounce1"></div>  
  46.         <div class="bounce2"></div>  
  47.     </div>  
  48.     <body></body>  
  49. </html>  
I hope it is useful. Please feel free to ask if you have any doubts.