August 15, 2016
CSS Wandering Cubes Loading Animation
One of the main advantages of using CSS methods over GIF images is that they don’t take so much time to load. They are much quicker and are available whenever we want them. In this tutorial, I am going to show you how to create wonderful Wandering Cubes loading animation using CSS and HTML. It uses the animation, transforms capabilities of CSS and it’s supporting to all the browsers.
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 |
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Loading_model_5</title> <style> body{ background-color:#F6C; } .loading{ margin: 300px auto; width: 40px; height: 40px; position:relative; } .square_1, .square_2{ background-color: #FFF; width: 15px; height: 15px; position:absolute; top: 0; left: 0; -webkit-animation: sa-cubemove 1.8s infinite ease-in-out; animation: sa-cubemove 1.8s infinite ease-in-out; } .square_2{ -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } @keyframes sa-cubemove{ 25%{ transform: translateX(42px) rotate(-90deg) scale(0.5); -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5); } 50%{ transform: translateX(42px) translateY(42px) rotate(-179deg); -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg); } 50.1{ transform: translateX(42px) translateY(42px) rotate(-180deg); -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg); } 75%{ transform:translateX(0px) translateY(42px) rotate(-270deg) scale(0.5); -webkit-transform:translateX(0px) translateY(42px) rotate(-270deg) scale(0.5); } 100%{ transform: rotate(-360deg); -webkit-transform: rotate(-360deg); } } @-webkit-keyframes sa-cubemove{ 25%{ -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);} 50%{ -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);} 75%{ -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5); } 100%{ -webkit-transform: rotate(-360deg);} } </style> </head> <body> <div class="loading"> <div class="square_1"></div> <div class="square_2"></div> </div> </body> </html> |
Download
