August 15, 2016
CSS Rotating Plane Loading Animation
Hi, friends in this tutorial we going to create rotating plane loading animation. Loading animation is really necessary part of websites and has a large impact on the user experience of a web application. Gif images loading animation are also quite common replacements but they take up a lot of space which can be annoying. So CSS animation is best. In this tutorial, we will be using HTML & CSS and to make our loader work.
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 |
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Loading_model_1</title> <style> body{ background-color:#06c; } .loading{ width:40px; height:40px; background-color:#FFF; margin: 300px auto; -webkit-animation: sa-rotateplane 1.5s infinite ease-in-out; animation: sa-rotateplane 1.5s infinite ease-in-out; } @keyframes sa-rotateplane{ 0%{ transform: perspective(120px) rotateX(0deg) rotateY(0deg); -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg); } 50%{ transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); } 100%{ transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } } @-webkit-keyframes sa-rotateplane { 0%{ -webkit-transform: perspective(120px)} 50%{ -webkit-transform: perspective(120px) rotateY(180deg)} 100%{ -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) } } </style> </head> <body> <div class="loading"></div> </body> </html> |
Download
