##Simple loading animation
Simple loading animation using three divs that contain an animation. Each one filled by a black background color that increases the size from 0 to 20 px in height and width in a sequence. So, the first animation starts first, the second has a longer delay than the first one, and the third has more delay than the second one in an infinite loop.
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Simple loading animation</title> | |
| <link href="style.css" rel="stylesheet"/> | |
| </head> | |
| <body> | |
| <div id="threeBalls"> | |
| <div id="first"></div> | |
| <div id="second"></div> | |
| <div id="third"></div> | |
| </div> | |
| </body> | |
| </html> |
| @-webkit-keyframes first-exercise { | |
| from { | |
| -webkit-transform : scale(0); | |
| transform : scale(0); | |
| } | |
| 33% { | |
| -webkit-transform : scale(1); | |
| transform : scale(1); | |
| } | |
| 66% { | |
| -webkit-transform : scale(1); | |
| transform : scale(1); | |
| } | |
| to { | |
| -webkit-transform : scale(0); | |
| transform : scale(0); | |
| } | |
| } | |
| @-moz-keyframes first-exercise { | |
| from { | |
| width : 20px; | |
| height : 20px; | |
| } | |
| to { | |
| width : 0px; | |
| height : 0px; | |
| } | |
| } | |
| @-o-keyframes first-exercise { | |
| from { | |
| width : 20px; | |
| height : 20px; | |
| } | |
| to { | |
| width : 0px; | |
| height : 0px; | |
| } | |
| } | |
| @keyframes first-exercise { | |
| from { | |
| width : 20px; | |
| height : 20px; | |
| } | |
| to { | |
| width : 0px; | |
| height : 0px; | |
| } | |
| } | |
| #threeBalls > div { | |
| display : inline-block; | |
| } | |
| #first { | |
| width : 20px; | |
| height : 20px; | |
| background-color : #FF0099; | |
| -o-animation-name : first-exercise; | |
| -moz-animation-name : first-exercise; | |
| -webkit-animation-name : first-exercise; | |
| animation-name : first-exercise; | |
| -o-animation-duration : 2s; | |
| -moz-animation-duration : 2s; | |
| -webkit-animation-duration : 2s; | |
| animation-duration : 2s; | |
| -webkit-animation-iteration-count : infinite; | |
| animation-iteration-count : infinite; | |
| } | |
| #second { | |
| width : 20px; | |
| height : 20px; | |
| background-color : #FF0099; | |
| -o-animation-name : first-exercise; | |
| -moz-animation-name : first-exercise; | |
| -webkit-animation-name : first-exercise; | |
| animation-name : first-exercise; | |
| -o-animation-duration : 2s; | |
| -moz-animation-duration : 2s; | |
| -webkit-animation-duration : 2s; | |
| animation-duration : 2s; | |
| -webkit-animation-delay : 0.2s; | |
| animation-delay : 0.2s; | |
| -webkit-animation-iteration-count : infinite; | |
| animation-iteration-count : infinite; | |
| } | |
| #third { | |
| width : 20px; | |
| height : 20px; | |
| background-color : #FF0099; | |
| -o-animation-name : first-exercise; | |
| -moz-animation-name : first-exercise; | |
| -webkit-animation-name : first-exercise; | |
| animation-name : first-exercise; | |
| -o-animation-duration : 2s; | |
| -moz-animation-duration : 2s; | |
| -webkit-animation-duration : 2s; | |
| animation-duration : 2s; | |
| -webkit-animation-delay : 0.4s; | |
| animation-delay : 0.4s; | |
| -webkit-animation-iteration-count : infinite; | |
| animation-iteration-count : infinite; | |
| } |