Loader by Ratinax
#212121
1.banter-loader { 2 position: absolute; 3 left: 50%; 4 top: 50%; 5 width: 72px; 6 height: 72px; 7 margin-left: -36px; 8 margin-top: -36px; 9} 10 11.banter-loader__box { 12 float: left; 13 position: relative; 14 width: 20px; 15 height: 20px; 16 margin-right: 6px; 17} 18 19.banter-loader__box:before { 20 content: ""; 21 position: absolute; 22 left: 0; 23 top: 0; 24 width: 100%; 25 height: 100%; 26 background: #fff; 27 border-radius: 50%; 28} 29 30.banter-loader__box:nth-child(3n) { 31 margin-right: 0; 32 margin-bottom: 6px; 33} 34 35.banter-loader__box:nth-child(1):before, 36.banter-loader__box:nth-child(4):before { 37 margin-left: 26px; 38} 39 40.banter-loader__box:nth-child(3):before { 41 margin-top: 52px; 42} 43 44.banter-loader__box:last-child { 45 margin-bottom: 0; 46} 47 48@keyframes moveBox-1 { 49 9.0909090909% { 50 transform: translate(-26px, 0); 51 } 52 53 18.1818181818% { 54 transform: translate(0px, 0); 55 } 56 57 27.2727272727% { 58 transform: translate(0px, 0); 59 } 60 61 36.3636363636% { 62 transform: translate(26px, 0); 63 } 64 65 45.4545454545% { 66 transform: translate(26px, 26px); 67 } 68 69 54.5454545455% { 70 transform: translate(26px, 26px); 71 } 72 73 63.6363636364% { 74 transform: translate(26px, 26px); 75 } 76 77 72.7272727273% { 78 transform: translate(26px, 0px); 79 } 80 81 81.8181818182% { 82 transform: translate(0px, 0px); 83 } 84 85 90.9090909091% { 86 transform: translate(-26px, 0px); 87 } 88 89 100% { 90 transform: translate(0px, 0px); 91 } 92} 93 94.banter-loader__box:nth-child(1) { 95 animation: moveBox-1 4s infinite; 96} 97 98@keyframes moveBox-2 { 99 9.0909090909% { 100 transform: translate(0, 0); 101 } 102 103 18.1818181818% { 104 transform: translate(26px, 0); 105 } 106 107 27.2727272727% { 108 transform: translate(0px, 0); 109 } 110 111 36.3636363636% { 112 transform: translate(26px, 0); 113 } 114 115 45.4545454545% { 116 transform: translate(26px, 26px); 117 } 118 119 54.5454545455% { 120 transform: translate(26px, 26px); 121 } 122 123 63.6363636364% { 124 transform: translate(26px, 26px); 125 } 126 127 72.7272727273% { 128 transform: translate(26px, 26px); 129 } 130 131 81.8181818182% { 132 transform: translate(0px, 26px); 133 } 134 135 90.9090909091% { 136 transform: translate(0px, 26px); 137 } 138 139 100% { 140 transform: translate(0px, 0px); 141 } 142} 143 144.banter-loader__box:nth-child(2) { 145 animation: moveBox-2 4s infinite; 146} 147 148@keyframes moveBox-3 { 149 9.0909090909% { 150 transform: translate(-26px, 0); 151 } 152 153 18.1818181818% { 154 transform: translate(-26px, 0); 155 } 156 157 27.2727272727% { 158 transform: translate(0px, 0); 159 } 160 161 36.3636363636% { 162 transform: translate(-26px, 0); 163 } 164 165 45.4545454545% { 166 transform: translate(-26px, 0); 167 } 168 169 54.5454545455% { 170 transform: translate(-26px, 0); 171 } 172 173 63.6363636364% { 174 transform: translate(-26px, 0); 175 } 176 177 72.7272727273% { 178 transform: translate(-26px, 0); 179 } 180 181 81.8181818182% { 182 transform: translate(-26px, -26px); 183 } 184 185 90.9090909091% { 186 transform: translate(0px, -26px); 187 } 188 189 100% { 190 transform: translate(0px, 0px); 191 } 192} 193 194.banter-loader__box:nth-child(3) { 195 animation: moveBox-3 4s infinite; 196} 197 198@keyframes moveBox-4 { 199 9.0909090909% { 200 transform: translate(-26px, 0); 201 } 202 203 18.1818181818% { 204 transform: translate(-26px, 0); 205 } 206 207 27.2727272727% { 208 transform: translate(-26px, -26px); 209 } 210 211 36.3636363636% { 212 transform: translate(0px, -26px); 213 } 214 215 45.4545454545% { 216 transform: translate(0px, 0px); 217 } 218 219 54.5454545455% { 220 transform: translate(0px, -26px); 221 } 222 223 63.6363636364% { 224 transform: translate(0px, -26px); 225 } 226 227 72.7272727273% { 228 transform: translate(0px, -26px); 229 } 230 231 81.8181818182% { 232 transform: translate(-26px, -26px); 233 } 234 235 90.9090909091% { 236 transform: translate(-26px, 0px); 237 } 238 239 100% { 240 transform: translate(0px, 0px); 241 } 242} 243 244.banter-loader__box:nth-child(4) { 245 animation: moveBox-4 4s infinite; 246} 247 248@keyframes moveBox-5 { 249 9.0909090909% { 250 transform: translate(0, 0); 251 } 252 253 18.1818181818% { 254 transform: translate(0, 0); 255 } 256 257 27.2727272727% { 258 transform: translate(0, 0); 259 } 260 261 36.3636363636% { 262 transform: translate(26px, 0); 263 } 264 265 45.4545454545% { 266 transform: translate(26px, 0); 267 } 268 269 54.5454545455% { 270 transform: translate(26px, 0); 271 } 272 273 63.6363636364% { 274 transform: translate(26px, 0); 275 } 276 277 72.7272727273% { 278 transform: translate(26px, 0); 279 } 280 281 81.8181818182% { 282 transform: translate(26px, -26px); 283 } 284 285 90.9090909091% { 286 transform: translate(0px, -26px); 287 } 288 289 100% { 290 transform: translate(0px, 0px); 291 } 292} 293 294.banter-loader__box:nth-child(5) { 295 animation: moveBox-5 4s infinite; 296} 297 298@keyframes moveBox-6 { 299 9.0909090909% { 300 transform: translate(0, 0); 301 } 302 303 18.1818181818% { 304 transform: translate(-26px, 0); 305 } 306 307 27.2727272727% { 308 transform: translate(-26px, 0); 309 } 310 311 36.3636363636% { 312 transform: translate(0px, 0); 313 } 314 315 45.4545454545% { 316 transform: translate(0px, 0); 317 } 318 319 54.5454545455% { 320 transform: translate(0px, 0); 321 } 322 323 63.6363636364% { 324 transform: translate(0px, 0); 325 } 326 327 72.7272727273% { 328 transform: translate(0px, 26px); 329 } 330 331 81.8181818182% { 332 transform: translate(-26px, 26px); 333 } 334 335 90.9090909091% { 336 transform: translate(-26px, 0px); 337 } 338 339 100% { 340 transform: translate(0px, 0px); 341 } 342} 343 344.banter-loader__box:nth-child(6) { 345 animation: moveBox-6 4s infinite; 346} 347 348@keyframes moveBox-7 { 349 9.0909090909% { 350 transform: translate(26px, 0); 351 } 352 353 18.1818181818% { 354 transform: translate(26px, 0); 355 } 356 357 27.2727272727% { 358 transform: translate(26px, 0); 359 } 360 361 36.3636363636% { 362 transform: translate(0px, 0); 363 } 364 365 45.4545454545% { 366 transform: translate(0px, -26px); 367 } 368 369 54.5454545455% { 370 transform: translate(26px, -26px); 371 } 372 373 63.6363636364% { 374 transform: translate(0px, -26px); 375 } 376 377 72.7272727273% { 378 transform: translate(0px, -26px); 379 } 380 381 81.8181818182% { 382 transform: translate(0px, 0px); 383 } 384 385 90.9090909091% { 386 transform: translate(26px, 0px); 387 } 388 389 100% { 390 transform: translate(0px, 0px); 391 } 392} 393 394.banter-loader__box:nth-child(7) { 395 animation: moveBox-7 4s infinite; 396} 397 398@keyframes moveBox-8 { 399 9.0909090909% { 400 transform: translate(0, 0); 401 } 402 403 18.1818181818% { 404 transform: translate(-26px, 0); 405 } 406 407 27.2727272727% { 408 transform: translate(-26px, -26px); 409 } 410 411 36.3636363636% { 412 transform: translate(0px, -26px); 413 } 414 415 45.4545454545% { 416 transform: translate(0px, -26px); 417 } 418 419 54.5454545455% { 420 transform: translate(0px, -26px); 421 } 422 423 63.6363636364% { 424 transform: translate(0px, -26px); 425 } 426 427 72.7272727273% { 428 transform: translate(0px, -26px); 429 } 430 431 81.8181818182% { 432 transform: translate(26px, -26px); 433 } 434 435 90.9090909091% { 436 transform: translate(26px, 0px); 437 } 438 439 100% { 440 transform: translate(0px, 0px); 441 } 442} 443 444.banter-loader__box:nth-child(8) { 445 animation: moveBox-8 4s infinite; 446} 447 448@keyframes moveBox-9 { 449 9.0909090909% { 450 transform: translate(-26px, 0); 451 } 452 453 18.1818181818% { 454 transform: translate(-26px, 0); 455 } 456 457 27.2727272727% { 458 transform: translate(0px, 0); 459 } 460 461 36.3636363636% { 462 transform: translate(-26px, 0); 463 } 464 465 45.4545454545% { 466 transform: translate(0px, 0); 467 } 468 469 54.5454545455% { 470 transform: translate(0px, 0); 471 } 472 473 63.6363636364% { 474 transform: translate(-26px, 0); 475 } 476 477 72.7272727273% { 478 transform: translate(-26px, 0); 479 } 480 481 81.8181818182% { 482 transform: translate(-52px, 0); 483 } 484 485 90.9090909091% { 486 transform: translate(-26px, 0); 487 } 488 489 100% { 490 transform: translate(0px, 0); 491 } 492} 493 494.banter-loader__box:nth-child(9) { 495 animation: moveBox-9 4s infinite; 496} 497
366 views
Variation of aloader
MIT License