August 15, 2016
CSS Three Bounce Loading Animation
Nobody wants to wait for anything to load, but with some creative spinner effects, you can better to make the wait a little boring. In this tutorial, we’re going to see how to create some amazing three bounce loading animation using CSS. Before we get started it’s worth looking out that a lot of these effects use the advanced CSS techniques. Using animation we transform the loading in our convenient way browser support is generally very good though the latest version of IE (at the time of writing IE11).
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 |
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Loading_model_2</title> <style> body{ background-color:#900; } .loading{ margin: 300px auto; width: 70px; text-align:center; } .loading > div{ width:18px; height:18px; background-color:#FFF; border-radius: 100%; display: inline-block; -webkit-animation: as-bouncedelay 1.5s infinite ease-in-out both; animation: as-bouncedelay 1.5s infinite ease-in-out both; } .loading .bounce_1{ -webkit-animation-delay: -0.32s; animation-delay: -0.32s; } .loading .bounce_2{ -webkit-animation-delay: -0.16s; animation-delay: -0.16s; } @keyframes as-bouncedelay{ 0%, 80%, 100%{ -webkit-transform: scale(0); transform: scale(0); } 40%{ -webkit-transform: scale(1.0); transform: scale(1.0); } } @-webkit-keyframes as-bouncedelay{ 0%, 80%, 100%{ -webkit-transform: scale(0); } 40%{ -webkit-transform:scale(1.0); } } </style> </head> <body> <div class="loading"> <div class="bounce_1"></div> <div class="bounce_2"></div> <div class="bounce_3"></div> </div> </body> </html> |
Download
