Loader by NlghtM4re
#212121
1.loader { 2 display: flex; 3 justify-content: center; 4 align-items: center; 5 width: 80px; 6 height: 80px; 7 position: relative; 8} 9 10.loader:before { 11 content: ""; 12 position: absolute; 13 top: -10px; 14 left: -10px; 15 right: -10px; 16 bottom: -10px; 17 border-radius: 50%; 18} 19 20.loader-inner { 21 display: flex; 22 justify-content: center; 23 align-items: center; 24 position: relative; 25} 26 27.loader-block { 28 display: inline-block; 29 width: 8px; 30 height: 10px; 31 margin: 2px; 32 background-color: rgb(53, 143, 246); 33 box-shadow: 0 0 30px rgb(53, 143, 246); 34 animation: loader 5s infinite; 35} 36 37.loader-block:nth-child(1) { 38 animation-delay: 0.2s; 39} 40 41.loader-block:nth-child(2) { 42 animation-delay: 0.4s; 43} 44 45.loader-block:nth-child(3) { 46 animation-delay: 0.6s; 47} 48 49.loader-block:nth-child(4) { 50 animation-delay: 0.8s; 51} 52 53.loader-block:nth-child(5) { 54 animation-delay: 1s; 55} 56 57.loader-block:nth-child(6) { 58 animation-delay: 1.2s; 59} 60 61.loader-block:nth-child(7) { 62 animation-delay: 1.4s; 63} 64 65.loader-block:nth-child(8) { 66 animation-delay: 1.6s; 67} 68 69.loader-block:nth-child(9) { 70 animation-delay: 1.8s; 71} 72 73.loader-block:nth-child(10) { 74 animation-delay: 2s; 75} 76 77.loader-block:nth-child(11) { 78 animation-delay: 2.2s; 79} 80 81.loader-block:nth-child(12) { 82 animation-delay: 2.4s; 83} 84 85.loader-block:nth-child(13) { 86 animation-delay: 2.6s; 87} 88 89.loader-block:nth-child(14) { 90 animation-delay: 2.8s; 91} 92 93.loader-block:nth-child(15) { 94 animation-delay: 3s; 95} 96 97.loader-block:nth-child(16) { 98 animation-delay: 3.2s; 99} 100 101.loader-block:nth-child(17) { 102 animation-delay: 3.4s; 103} 104 105.loader-block:nth-child(18) { 106 animation-delay: 3.6s; 107} 108 109.loader-block:nth-child(19) { 110 animation-delay: 3.8s; 111} 112 113.loader-block:nth-child(20) { 114 animation-delay: 4s; 115} 116 117.loader-block:nth-child(21) { 118 animation-delay: 4.2s; 119} 120 121.loader-block:nth-child(22) { 122 animation-delay: 4.4s; 123} 124 125.loader-block:nth-child(23) { 126 animation-delay: 4.6s; 127} 128 129.loader-block:nth-child(24) { 130 animation-delay: 4.8s; 131} 132 133@keyframes loader { 134 0% { 135 transform: scale(1); 136 box-shadow: 0 0 40px rgb(53, 143, 246); 137 } 138 139 13% { 140 transform: scale(1, 4); 141 box-shadow: 0 0 60px rgb(53, 143, 246); 142 } 143 144 26% { 145 transform: scale(1); 146 box-shadow: 0 0 40px rgb(53, 143, 246); 147 } 148} 149
1K views
1K views
MIT License