September 24, 2016
Pure CSS Circular Loading Spinner
Hi friend in this tutorial, I show you how to create CSS loading spinner. Now that optimizing web pages for large displays and portable devices becomes more important, you get tons of web pages offering CSS loading spinners. Sadly many of them are hold heavy and require you to add elements to your page in order to build them. I find it very convenient to simply add a class to the element in that I like to show a 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 |
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Loading_model_11</title> <style> body{ background-color: #2e2a31; } .loading{ position: absolute; left: 50%; top:50%; margin: -60px 0 0 -60px; background-color:#ff731a; width:100px; height:100px; border-radius:100%; border: 10px solid #FFF; } .loading:after{ content: ''; background:trasparent; width:140%; height:140%; position:absolute; border-radius: 100%; top: -20%; left: -20%; opacity: 0.7; box-shadow: rgba(255, 255, 255, 0.6) -4px -5px 3px -3px; animation: rotate 2s infinite linear; } @keyframes rotate{ 0%{ transform: rotateZ(0deg); } 100%{ transform: rotateZ(360deg); } } </style> </head> <body> <div class="loading"></div> </body> </html> |
Download
