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