2.9K views
1.loader { 2 position: relative; 3 width: 75px; 4 height: 100px; 5} 6 7.loader__bar { 8 position: absolute; 9 bottom: 0; 10 width: 10px; 11 height: 50%; 12 background: rgb(0, 0, 0); 13 transform-origin: center bottom; 14 box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2); 15} 16 17.loader__bar:nth-child(1) { 18 left: 0px; 19 transform: scale(1, 0.2); 20 -webkit-animation: barUp1 4s infinite; 21 animation: barUp1 4s infinite; 22} 23 24.loader__bar:nth-child(2) { 25 left: 15px; 26 transform: scale(1, 0.4); 27 -webkit-animation: barUp2 4s infinite; 28 animation: barUp2 4s infinite; 29} 30 31.loader__bar:nth-child(3) { 32 left: 30px; 33 transform: scale(1, 0.6); 34 -webkit-animation: barUp3 4s infinite; 35 animation: barUp3 4s infinite; 36} 37 38.loader__bar:nth-child(4) { 39 left: 45px; 40 transform: scale(1, 0.8); 41 -webkit-animation: barUp4 4s infinite; 42 animation: barUp4 4s infinite; 43} 44 45.loader__bar:nth-child(5) { 46 left: 60px; 47 transform: scale(1, 1); 48 -webkit-animation: barUp5 4s infinite; 49 animation: barUp5 4s infinite; 50} 51 52.loader__ball { 53 position: absolute; 54 bottom: 10px; 55 left: 0; 56 width: 10px; 57 height: 10px; 58 background: rgb(44, 143, 255); 59 border-radius: 50%; 60 -webkit-animation: ball624 4s infinite; 61 animation: ball624 4s infinite; 62} 63 64@keyframes ball624 { 65 0% { 66 transform: translate(0, 0); 67 } 68 69 5% { 70 transform: translate(8px, -14px); 71 } 72 73 10% { 74 transform: translate(15px, -10px); 75 } 76 77 17% { 78 transform: translate(23px, -24px); 79 } 80 81 20% { 82 transform: translate(30px, -20px); 83 } 84 85 27% { 86 transform: translate(38px, -34px); 87 } 88 89 30% { 90 transform: translate(45px, -30px); 91 } 92 93 37% { 94 transform: translate(53px, -44px); 95 } 96 97 40% { 98 transform: translate(60px, -40px); 99 } 100 101 50% { 102 transform: translate(60px, 0); 103 } 104 105 57% { 106 transform: translate(53px, -14px); 107 } 108 109 60% { 110 transform: translate(45px, -10px); 111 } 112 113 67% { 114 transform: translate(37px, -24px); 115 } 116 117 70% { 118 transform: translate(30px, -20px); 119 } 120 121 77% { 122 transform: translate(22px, -34px); 123 } 124 125 80% { 126 transform: translate(15px, -30px); 127 } 128 129 87% { 130 transform: translate(7px, -44px); 131 } 132 133 90% { 134 transform: translate(0, -40px); 135 } 136 137 100% { 138 transform: translate(0, 0); 139 } 140} 141 142@-webkit-keyframes barUp1 { 143 0% { 144 transform: scale(1, 0.2); 145 } 146 147 40% { 148 transform: scale(1, 0.2); 149 } 150 151 50% { 152 transform: scale(1, 1); 153 } 154 155 90% { 156 transform: scale(1, 1); 157 } 158 159 100% { 160 transform: scale(1, 0.2); 161 } 162} 163 164@keyframes barUp1 { 165 0% { 166 transform: scale(1, 0.2); 167 } 168 169 40% { 170 transform: scale(1, 0.2); 171 } 172 173 50% { 174 transform: scale(1, 1); 175 } 176 177 90% { 178 transform: scale(1, 1); 179 } 180 181 100% { 182 transform: scale(1, 0.2); 183 } 184} 185 186@-webkit-keyframes barUp2 { 187 0% { 188 transform: scale(1, 0.4); 189 } 190 191 40% { 192 transform: scale(1, 0.4); 193 } 194 195 50% { 196 transform: scale(1, 0.8); 197 } 198 199 90% { 200 transform: scale(1, 0.8); 201 } 202 203 100% { 204 transform: scale(1, 0.4); 205 } 206} 207 208@keyframes barUp2 { 209 0% { 210 transform: scale(1, 0.4); 211 } 212 213 40% { 214 transform: scale(1, 0.4); 215 } 216 217 50% { 218 transform: scale(1, 0.8); 219 } 220 221 90% { 222 transform: scale(1, 0.8); 223 } 224 225 100% { 226 transform: scale(1, 0.4); 227 } 228} 229 230@-webkit-keyframes barUp3 { 231 0% { 232 transform: scale(1, 0.6); 233 } 234 235 100% { 236 transform: scale(1, 0.6); 237 } 238} 239 240@keyframes barUp3 { 241 0% { 242 transform: scale(1, 0.6); 243 } 244 245 100% { 246 transform: scale(1, 0.6); 247 } 248} 249 250@-webkit-keyframes barUp4 { 251 0% { 252 transform: scale(1, 0.8); 253 } 254 255 40% { 256 transform: scale(1, 0.8); 257 } 258 259 50% { 260 transform: scale(1, 0.4); 261 } 262 263 90% { 264 transform: scale(1, 0.4); 265 } 266 267 100% { 268 transform: scale(1, 0.8); 269 } 270} 271 272@keyframes barUp4 { 273 0% { 274 transform: scale(1, 0.8); 275 } 276 277 40% { 278 transform: scale(1, 0.8); 279 } 280 281 50% { 282 transform: scale(1, 0.4); 283 } 284 285 90% { 286 transform: scale(1, 0.4); 287 } 288 289 100% { 290 transform: scale(1, 0.8); 291 } 292} 293 294@-webkit-keyframes barUp5 { 295 0% { 296 transform: scale(1, 1); 297 } 298 299 40% { 300 transform: scale(1, 1); 301 } 302 303 50% { 304 transform: scale(1, 0.2); 305 } 306 307 90% { 308 transform: scale(1, 0.2); 309 } 310 311 100% { 312 transform: scale(1, 1); 313 } 314} 315 316@keyframes barUp5 { 317 0% { 318 transform: scale(1, 1); 319 } 320 321 40% { 322 transform: scale(1, 1); 323 } 324 325 50% { 326 transform: scale(1, 0.2); 327 } 328 329 90% { 330 transform: scale(1, 0.2); 331 } 332 333 100% { 334 transform: scale(1, 1); 335 } 336}
MIT License