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.