September 24, 2016
CSS Chasing Dots Loading Spinner
CSS loading spinner is a great method to provide user feedback during waiting periods. This can indicate to a user that your website has not knocked and is processing data. The way to create loading spinner for the website was by using animated GIFs. Animated GIFs can have weight problems. That is due to the number of frames that are needed to produce an animated GIF of a loading spinner. They also don’t give the best quality image, particularly on newer, more common high-res displays. With the new technologies such as CSS3, I will walk you through the steps of creating a smooth loading spinner.
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 68 69 70 71 72 73 |
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Loading_model_8</title> <style> body{ background-color:#1ad2d4; } .loading{ margin: 300px auto; width:50px; height:50px; position:relative; text-align: center; -webkit-animation: sa-rotate 2.0s infinite linear; animation: sa-rotate 2.0s infinite linear; } .dot_1, .dot_2{ width: 70%; height: 70%; display: inline-block; position:absolute; top: 0; background-color: #FFF; border-radius: 100%; -webkit-animation: sa-bounce 2.0s infinite ease-in-out; animation: sa-bounce 2.0s infinite ease-in-out; } .dot_2{ top: auto; bottom: 0; -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } @keyframes sa-bounce{ 0%, 100%{ transform: scale(0.0); -webkit-transform: scale(0.0); } 50%{ transform:scale(1.0); -webkit-transform: scale(1.0); } } @-webkit-keyframes sa-rotate { 100%{ -webkit-transform: rotate(360deg); } } @keyframes sa-rotate { 100%{ transform: rotate(360deg); -webkit-transform: rotate(360deg); } } @-webkit-keyframes sa-bounce{ 0%, 100%{ -webkit-transform:scale(0.0); } 50%{ -webkit-transform: scale(1.0); } } </style> </head> <body> <div class="loading"> <div class="dot_1"></div> <div class="dot_2"></div> </div> </body> </html> |
Download
