Sept 18, 2022751 views 3
CSSAdd prefixes
1.loader { 2 position: absolute; 3 width: 54px; 4 height: 54px; 5 margin: 0 40%; 6 border-radius: 10px; 7} 8 9.loader div { 10 width: 8%; 11 height: 24%; 12 background: rgb(128, 128, 128); 13 position: absolute; 14 left: 50%; 15 top: 30%; 16 opacity: 0; 17 border-radius: 50px; 18 box-shadow: 0 0 3px rgba(0,0,0,0.2); 19 animation: fade458 1s linear infinite; 20} 21 22@keyframes fade458 { 23 from { 24 opacity: 1; 25 } 26 27 to { 28 opacity: 0.25; 29 } 30} 31 32.loader .bar1 { 33 transform: rotate(0deg) translate(0, -130%); 34 animation-delay: 0s; 35} 36 37.loader .bar2 { 38 transform: rotate(30deg) translate(0, -130%); 39 animation-delay: -1.1s; 40} 41 42.loader .bar3 { 43 transform: rotate(60deg) translate(0, -130%); 44 animation-delay: -1s; 45} 46 47.loader .bar4 { 48 transform: rotate(90deg) translate(0, -130%); 49 animation-delay: -0.9s; 50} 51 52.loader .bar5 { 53 transform: rotate(120deg) translate(0, -130%); 54 animation-delay: -0.8s; 55} 56 57.loader .bar6 { 58 transform: rotate(150deg) translate(0, -130%); 59 animation-delay: -0.7s; 60} 61 62.loader .bar7 { 63 transform: rotate(180deg) translate(0, -130%); 64 animation-delay: -0.6s; 65} 66 67.loader .bar8 { 68 transform: rotate(210deg) translate(0, -130%); 69 animation-delay: -0.5s; 70} 71 72.loader .bar9 { 73 transform: rotate(240deg) translate(0, -130%); 74 animation-delay: -0.4s; 75} 76 77.loader .bar10 { 78 transform: rotate(270deg) translate(0, -130%); 79 animation-delay: -0.3s; 80} 81 82.loader .bar11 { 83 transform: rotate(300deg) translate(0, -130%); 84 animation-delay: -0.2s; 85} 86 87.loader .bar12 { 88 transform: rotate(330deg) translate(0, -130%); 89 animation-delay: -0.1s; 90} 91
HTML
1<div class="loader"> 2 <div class="bar1"></div> 3 <div class="bar2"></div> 4 <div class="bar3"></div> 5 <div class="bar4"></div> 6 <div class="bar5"></div> 7 <div class="bar6"></div> 8 <div class="bar7"></div> 9 <div class="bar8"></div> 10 <div class="bar9"></div> 11 <div class="bar10"></div> 12 <div class="bar11"></div> 13 <div class="bar12"></div> 14</div>