August 15, 2016
CSS Pulse Loading Animation
Just a brief walkthrough to create a simple effect, to learn some basic stuff. In this tutorial, we’re creating Pulse loader animation using CSS animations. We’re using CSS keyframes to create the desired effect. The best option to reduce such heavy graphics images is using CSS methodologies to replace them. Using only basic HTML elements like div and CSS features you can create beautiful and extremely light animations.
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 |
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Loading_model_4</title> <style> body{ background-color:#F90; } .loading{ width:60px; height:60px; margin: 300px auto; background-color: #FFF; border-radius: 100%; -webkit-animation: sa-scaleout 1.0s infinite ease-in-out; animation: sa-scaleout 1.0s infinite ease-in-out; } @keyframes sa-scaleout { 0%{ -webkit-transform:scale(0); transform:scale(0); } 100%{ -webkit-transform:scale(1.0); opacity: 0; } } @keyframes sa-scaleout{ 0%{ -webkit-transform: scale(0); } 100%{ -webkit-transform: scale(1.0); opacity:0; } } </style> </head> <body> <div class="loading"></div> </body> </html> |
Download
