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