Post
Ask Question

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.   height: 60px;  
  3.   width: 60px;  
  4.   position: relative;  
  5.   margin: 100px 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.