August 15, 2016
CSS Wave Loading Animation
Hi, friends in this tutorial we going to create CSS Wave loading animation. Using CSS animations to create smooth and easily customizable animations. For all of the bars we are going to change the animation delay to make the animation run at many times, this makes the bars load in a wave. CSS animations and transitions for HTML elements without the need to write JavaScript to do it.
index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Loading_model_3</title> <style> body{ background-color:#396; } .loading{ margin: 300px auto; width:50px; height:60px; text-align:center; font-size:10px; } .loading > div{ background-color: #FFF; height: 100%; width: 6px; display: inline-block; -webkit-animation: sa-stretchdelay 1.4s infinite ease-in-out; animation: sa-stretchdelay 1.4s infinite ease-in-out; } .loading .rectangle_2 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; } .loading .rectangle_3 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } .loading .rectangle_4 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } .loading .rectangle_5 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } @keyframes sa-stretchdelay { 0%, 40%, 100%{ transform: scaleY(0.4); -webkit-transform: scaleY(0.4); } 20% { transform:scaleY(1.0); -webkit-transform:scaleY(1.0); } } @-webkit-keyframes sa-stretchdelay{ 0%, 40%, 100% { -webkit-transform: scaleY(0.4); } 20% { -webkit-transform: scaleY(1.0); } } </style> </head> <body> <div class="loading"> <div class="rectangle_1"></div> <div class="rectangle_2"></div> <div class="rectangle_3"></div> <div class="rectangle_4"></div> <div class="rectangle_5"></div> </div> </body> </html> |
Download
