Nov 6, 2022210 views
CSSAdd prefixes
1.loader { 2 position: absolute; 3 margin: 75px auto; 4 width: 150px; 5 height: 150px; 6 display: block; 7 overflow: hidden; 8} 9 10.loader div { 11 height: 100%; 12} 13 14/* loader 1 */ 15.loader1, .loader1 div { 16 border-radius: 50%; 17 padding: 8px; 18 border: 2px solid transparent; 19 -webkit-animation: rotate1076 linear 3.5s infinite; 20 animation: rotate1076 linear 3.5s infinite; 21 border-top-color: rgba(0, 0, 0, 0.5); 22 border-bottom-color: rgba(0, 0, 255, 0.5); 23} 24 25.loader, .loader * { 26 will-change: transform; 27} 28 29@keyframes rotate1076 { 30 0% { 31 transform: rotate(0deg); 32 } 33 34 50% { 35 transform: rotate(180deg); 36 } 37 38 100% { 39 transform: rotate(360deg); 40 } 41} 42 43
HTML
1<div class="loader loader1"> 2 <div> 3 <div> 4 <div> 5 <div> 6 <div> 7 <div></div> 8 </div> 9 </div> 10 </div> 11 </div> 12 </div> 13</div> 14 15<div class="loader loader2"> 16 <div> 17 <div> 18 <div> 19 <div> 20 <div> 21 <div> 22 </div> 23 </div> 24 </div> 25 </div> 26 </div> 27 </div> 28</div> 29 30<div class="loader loader3"> 31 <div> 32 <div> 33 <div> 34 <div> 35 <div> 36 <div></div> 37 </div> 38 </div> 39 </div> 40 </div> 41 </div> 42</div> 43 44<div class="loader loader4"> 45 <div> 46 <div> 47 <div> 48 <div> 49 <div> 50 <div> 51 <div> 52 <div> 53 <div> 54 <div></div> 55 </div> 56 </div> 57 </div> 58 </div> 59 </div> 60 </div> 61 </div> 62 </div> 63 </div> 64</div>