#e8e8e8
1.loader { 2 display: inline-block; 3 position: relative; 4 width: 80px; 5 height: 80px; 6} 7 8.loader .loader_item { 9 transform-origin: 40px 40px; 10 animation: spinner 1.2s linear infinite; 11} 12 13.loader .loader_item:after { 14 content: " "; 15 display: block; 16 position: absolute; 17 top: 3px; 18 left: 37px; 19 width: 6px; 20 height: 18px; 21 border-radius: 20%; 22 /* try any color u want (yellow, red, lightskyblue ect...) */ 23 background: green; 24} 25 26.loader .loader_item:nth-child(1) { 27 transform: rotate(0deg); 28 animation-delay: -1.1s; 29} 30 31.loader .loader_item:nth-child(2) { 32 transform: rotate(30deg); 33 animation-delay: -1s; 34} 35 36.loader .loader_item:nth-child(3) { 37 transform: rotate(60deg); 38 animation-delay: -0.9s; 39} 40 41.loader .loader_item:nth-child(4) { 42 transform: rotate(90deg); 43 animation-delay: -0.8s; 44} 45 46.loader .loader_item:nth-child(5) { 47 transform: rotate(120deg); 48 animation-delay: -0.7s; 49} 50 51.loader .loader_item:nth-child(6) { 52 transform: rotate(150deg); 53 animation-delay: -0.6s; 54} 55 56.loader .loader_item:nth-child(7) { 57 transform: rotate(180deg); 58 animation-delay: -0.5s; 59} 60 61.loader .loader_item:nth-child(8) { 62 transform: rotate(210deg); 63 animation-delay: -0.4s; 64} 65 66.loader .loader_item:nth-child(9) { 67 transform: rotate(240deg); 68 animation-delay: -0.3s; 69} 70 71.loader .loader_item:nth-child(10) { 72 transform: rotate(270deg); 73 animation-delay: -0.2s; 74} 75 76.loader .loader_item:nth-child(11) { 77 transform: rotate(300deg); 78 animation-delay: -0.1s; 79} 80 81.loader .loader_item:nth-child(12) { 82 transform: rotate(330deg); 83 animation-delay: 0s; 84} 85 86@keyframes spinner { 87 0% { 88 opacity: 1; 89 filter: hue-rotate(0deg); 90 } 91 92 100% { 93 opacity: 0; 94 filter: hue-rotate(360deg); 95 } 96}
662 views
662 views
Comments
MIT License