Loader by NlghtM4re
#e8e8e8
1#loader { 2 width: 80px; 3 height: 40px; 4 position: absolute; 5 top: 50%; 6 left: 50%; 7 margin: -20px -40px; 8 z-index: 1000; 9} 10 11.lightsaber { 12 position: absolute; 13 width: 4px; 14 height: 12px; 15 background-color: #666; 16 border-radius: 1px; 17 bottom: 0; 18} 19 20.lightsaber.ls-left { 21 left: 0; 22} 23 24.lightsaber.ls-right { 25 right: 0; 26} 27 28.lightsaber:before { 29 position: absolute; 30 content: ' '; 31 display: block; 32 width: 2px; 33 height: 25px; 34 max-height: 1px; 35 left: 1px; 36 top: 1px; 37 background-color: #fff; 38 border-radius: 1px; 39 -webkit-transform: rotateZ(180deg); 40 transform: rotateZ(180deg); 41 -webkit-transform-origin: center top; 42 -ms-transform-origin: center top; 43 transform-origin: center top; 44} 45 46.lightsaber:after { 47 position: absolute; 48 content: ' '; 49 display: block; 50 width: 2px; 51 height: 2px; 52 left: 1px; 53 top: 4px; 54 background-color: #fff; 55 border-radius: 50%; 56} 57 58.ls-particles { 59 position: absolute; 60 left: 42px; 61 top: 10px; 62 width: 1px; 63 height: 5px; 64 background-color: rgb(51, 51, 51, 0); 65 -webkit-transform: rotateZ(0deg); 66 transform: rotateZ(0deg); 67} 68 69.lightsaber.ls-green:before { 70 -webkit-animation: showlightgreen 2s ease-in-out infinite 1s; 71 animation: showlightgreen 2s ease-in-out infinite 1s; 72} 73 74.lightsaber.ls-red:before { 75 -webkit-animation: showlightred 2s ease-in-out infinite 1s; 76 animation: showlightred 2s ease-in-out infinite 1s; 77} 78 79.lightsaber.ls-left { 80 -webkit-animation: fightleft 2s ease-in-out infinite 1s; 81 animation: fightleft 2s ease-in-out infinite 1s; 82} 83 84.lightsaber.ls-right { 85 -webkit-animation: fightright 2s ease-in-out infinite 1s; 86 animation: fightright 2s ease-in-out infinite 1s; 87} 88 89.ls-particles.ls-part-1 { 90 -webkit-animation: particles1 2s ease-out infinite 1s; 91 animation: particles1 2s ease-out infinite 1s; 92} 93 94.ls-particles.ls-part-2 { 95 -webkit-animation: particles2 2s ease-out infinite 1s; 96 animation: particles2 2s ease-out infinite 1s; 97} 98 99.ls-particles.ls-part-3 { 100 -webkit-animation: particles3 2s ease-out infinite 1s; 101 animation: particles3 2s ease-out infinite 1s; 102} 103 104.ls-particles.ls-part-4 { 105 -webkit-animation: particles4 2s ease-out infinite 1s; 106 animation: particles4 2s ease-out infinite 1s; 107} 108 109.ls-particles.ls-part-5 { 110 -webkit-animation: particles5 2s ease-out infinite 1s; 111 animation: particles5 2s ease-out infinite 1s; 112} 113 114@-webkit-keyframes showlightgreen { 115 0% { 116 max-height: 0; 117 box-shadow: 0 0 0 0 #87c054; 118 } 119 120 5% { 121 box-shadow: 0 0 4px 2px #87c054; 122 } 123 124 10% { 125 max-height: 22px; 126 } 127 128 80% { 129 max-height: 22px; 130 } 131 132 85% { 133 box-shadow: 0 0 4px 2px #87c054; 134 } 135 136 100% { 137 max-height: 0; 138 box-shadow: 0 0 0 0 #87c054; 139 } 140} 141 142@-webkit-keyframes showlightred { 143 0% { 144 max-height: 0; 145 box-shadow: 0 0 0 0 #f06363; 146 } 147 148 20% { 149 box-shadow: 0 0 4px 2px #f06363; 150 } 151 152 25% { 153 max-height: 22px; 154 } 155 156 80% { 157 max-height: 22px; 158 } 159 160 85% { 161 box-shadow: 0 0 4px 2px #f06363; 162 } 163 164 100% { 165 max-height: 0; 166 box-shadow: 0 0 0 0 #f06363; 167 } 168} 169 170@-webkit-keyframes fightleft { 171 0% { 172 -webkit-transform: rotateZ(0deg); 173 transform: rotateZ(0deg); 174 left: 0; 175 bottom: 0; 176 } 177 178 30% { 179 -webkit-transform: rotateZ(0deg); 180 transform: rotateZ(0deg); 181 bottom: 0; 182 } 183 184 40% { 185 -webkit-transform: rotateZ(45deg); 186 transform: rotateZ(45deg); 187 left: 0; 188 bottom: 2px; 189 } 190 191 45% { 192 -webkit-transform: rotateZ(65deg); 193 transform: rotateZ(65deg); 194 left: 0; 195 } 196 197 65% { 198 -webkit-transform: rotateZ(410deg); 199 transform: rotateZ(410deg); 200 left: 30px; 201 bottom: 10px; 202 } 203 204 95% { 205 -webkit-transform: rotateZ(410deg); 206 transform: rotateZ(410deg); 207 left: 0; 208 bottom: 0; 209 } 210 211 100% { 212 -webkit-transform: rotateZ(360deg); 213 transform: rotateZ(360deg); 214 left: 0; 215 bottom: 0; 216 } 217} 218 219@-webkit-keyframes fightright { 220 0% { 221 -webkit-transform: rotateZ(0deg); 222 transform: rotateZ(0deg); 223 right: 0; 224 bottom: 0; 225 } 226 227 30% { 228 -webkit-transform: rotateZ(0deg); 229 transform: rotateZ(0deg); 230 bottom: 0; 231 } 232 233 45% { 234 -webkit-transform: rotateZ(-45deg); 235 transform: rotateZ(-45deg); 236 right: 0; 237 bottom: 2px; 238 } 239 240 50% { 241 -webkit-transform: rotateZ(-65deg); 242 transform: rotateZ(-65deg); 243 right: 0; 244 } 245 246 68% { 247 -webkit-transform: rotateZ(-410deg); 248 transform: rotateZ(-410deg); 249 right: 27px; 250 bottom: 13px; 251 } 252 253 95% { 254 -webkit-transform: rotateZ(-410deg); 255 transform: rotateZ(-410deg); 256 right: 0; 257 bottom: 0; 258 } 259 260 100% { 261 -webkit-transform: rotateZ(-360deg); 262 transform: rotateZ(-360deg); 263 right: 0; 264 bottom: 0; 265 } 266} 267 268@-webkit-keyframes particles1 { 269 0% { 270 background-color: rgba(51, 51, 51,0); 271 -webkit-transform: rotateZ(35deg) translateY(0px); 272 transform: rotateZ(35deg) translateY(0px); 273 } 274 275 63% { 276 background-color: rgba(51, 51, 51,0); 277 -webkit-transform: rotateZ(35deg) translateY(0px); 278 transform: rotateZ(35deg) translateY(0px); 279 } 280 281 64% { 282 background-color: rgba(51, 51, 51,1); 283 -webkit-transform: rotateZ(35deg) translateY(0px); 284 transform: rotateZ(35deg) translateY(0px); 285 } 286 287 100% { 288 background-color: rgba(51, 51, 51,0); 289 -webkit-transform: rotateZ(35deg) translateY(-30px); 290 transform: rotateZ(35deg) translateY(-30px); 291 } 292} 293 294@-webkit-keyframes particles2 { 295 0% { 296 background-color: rgba(51, 51, 51,0); 297 -webkit-transform: rotateZ(-65deg) translateY(0px); 298 transform: rotateZ(-65deg) translateY(0px); 299 } 300 301 63% { 302 background-color: rgba(51, 51, 51,0); 303 -webkit-transform: rotateZ(-65deg) translateY(0px); 304 transform: rotateZ(-65deg) translateY(0px); 305 } 306 307 64% { 308 background-color: rgba(51, 51, 51,1); 309 -webkit-transform: rotateZ(-65deg) translateY(0px); 310 transform: rotateZ(-65deg) translateY(0px); 311 } 312 313 95% { 314 background-color: rgba(51, 51, 51,0); 315 -webkit-transform: rotateZ(-65deg) translateY(-40px); 316 transform: rotateZ(-65deg) translateY(-40px); 317 } 318 319 100% { 320 background-color: rgba(51, 51, 51,0); 321 -webkit-transform: rotateZ(-65deg) translateY(-40px); 322 transform: rotateZ(-65deg) translateY(-40px); 323 } 324} 325 326@-webkit-keyframes particles3 { 327 0% { 328 background-color: rgba(51, 51, 51,0); 329 -webkit-transform: rotateZ(-75deg) translateY(0px); 330 transform: rotateZ(-75deg) translateY(0px); 331 } 332 333 63% { 334 background-color: rgba(51, 51, 51,0); 335 -webkit-transform: rotateZ(-75deg) translateY(0px); 336 transform: rotateZ(-75deg) translateY(0px); 337 } 338 339 64% { 340 background-color: rgba(51, 51, 51,1); 341 -webkit-transform: rotateZ(-75deg) translateY(0px); 342 transform: rotateZ(-75deg) translateY(0px); 343 } 344 345 97% { 346 background-color: rgba(51, 51, 51,0); 347 -webkit-transform: rotateZ(-75deg) translateY(-35px); 348 transform: rotateZ(-75deg) translateY(-35px); 349 } 350 351 100% { 352 background-color: rgba(51, 51, 51,0); 353 -webkit-transform: rotateZ(-75deg) translateY(-35px); 354 transform: rotateZ(-75deg) translateY(-35px); 355 } 356} 357 358@-webkit-keyframes particles4 { 359 0% { 360 background-color: rgba(51, 51, 51,0); 361 -webkit-transform: rotateZ(-25deg) translateY(0px); 362 transform: rotateZ(-25deg) translateY(0px); 363 } 364 365 63% { 366 background-color: rgba(51, 51, 51,0); 367 -webkit-transform: rotateZ(-25deg) translateY(0px); 368 transform: rotateZ(-25deg) translateY(0px); 369 } 370 371 64% { 372 background-color: rgba(51, 51, 51,1); 373 -webkit-transform: rotateZ(-25deg) translateY(0px); 374 transform: rotateZ(-25deg) translateY(0px); 375 } 376 377 97% { 378 background-color: rgba(51, 51, 51,0); 379 -webkit-transform: rotateZ(-25deg) translateY(-30px); 380 transform: rotateZ(-25deg) translateY(-30px); 381 } 382 383 100% { 384 background-color: rgba(51, 51, 51,0); 385 -webkit-transform: rotateZ(-25deg) translateY(-30px); 386 transform: rotateZ(-25deg) translateY(-30px); 387 } 388} 389 390@-webkit-keyframes particles5 { 391 0% { 392 background-color: rgba(51, 51, 51,0); 393 -webkit-transform: rotateZ(65deg) translateY(0px); 394 transform: rotateZ(65deg) translateY(0px); 395 } 396 397 63% { 398 background-color: rgba(51, 51, 51,0); 399 -webkit-transform: rotateZ(65deg) translateY(0px); 400 transform: rotateZ(65deg) translateY(0px); 401 } 402 403 64% { 404 background-color: rgba(51, 51, 51,1); 405 -webkit-transform: rotateZ(65deg) translateY(0px); 406 transform: rotateZ(65deg) translateY(0px); 407 } 408 409 97% { 410 background-color: rgba(51, 51, 51,0); 411 -webkit-transform: rotateZ(65deg) translateY(-35px); 412 transform: rotateZ(65deg) translateY(-35px); 413 } 414 415 100% { 416 background-color: rgba(51, 51, 51,0); 417 -webkit-transform: rotateZ(65deg) translateY(-35px); 418 transform: rotateZ(65deg) translateY(-35px); 419 } 420} 421 422@keyframes showlightgreen { 423 0% { 424 max-height: 0; 425 box-shadow: 0 0 0 0 #87c054; 426 } 427 428 5% { 429 box-shadow: 0 0 4px 2px #87c054; 430 } 431 432 10% { 433 max-height: 22px; 434 } 435 436 80% { 437 max-height: 22px; 438 } 439 440 85% { 441 box-shadow: 0 0 4px 2px #87c054; 442 } 443 444 100% { 445 max-height: 0; 446 box-shadow: 0 0 0 0 #87c054; 447 } 448} 449 450@keyframes showlightred { 451 0% { 452 max-height: 0; 453 box-shadow: 0 0 0 0 #f06363; 454 } 455 456 20% { 457 box-shadow: 0 0 4px 2px #f06363; 458 } 459 460 25% { 461 max-height: 22px; 462 } 463 464 80% { 465 max-height: 22px; 466 } 467 468 85% { 469 box-shadow: 0 0 4px 2px #f06363; 470 } 471 472 100% { 473 max-height: 0; 474 box-shadow: 0 0 0 0 #f06363; 475 } 476} 477 478@keyframes fightleft { 479 0% { 480 -webkit-transform: rotateZ(0deg); 481 transform: rotateZ(0deg); 482 left: 0; 483 bottom: 0; 484 } 485 486 30% { 487 -webkit-transform: rotateZ(0deg); 488 transform: rotateZ(0deg); 489 bottom: 0; 490 } 491 492 40% { 493 -webkit-transform: rotateZ(45deg); 494 transform: rotateZ(45deg); 495 left: 0; 496 bottom: 2px; 497 } 498 499 45% { 500 -webkit-transform: rotateZ(65deg); 501 transform: rotateZ(65deg); 502 left: 0; 503 } 504 505 65% { 506 -webkit-transform: rotateZ(410deg); 507 transform: rotateZ(410deg); 508 left: 30px; 509 bottom: 10px; 510 } 511 512 95% { 513 -webkit-transform: rotateZ(410deg); 514 transform: rotateZ(410deg); 515 left: 0; 516 bottom: 0; 517 } 518 519 100% { 520 -webkit-transform: rotateZ(360deg); 521 transform: rotateZ(360deg); 522 left: 0; 523 bottom: 0; 524 } 525} 526 527@keyframes fightright { 528 0% { 529 -webkit-transform: rotateZ(0deg); 530 transform: rotateZ(0deg); 531 right: 0; 532 bottom: 0; 533 } 534 535 30% { 536 -webkit-transform: rotateZ(0deg); 537 transform: rotateZ(0deg); 538 bottom: 0; 539 } 540 541 45% { 542 -webkit-transform: rotateZ(-45deg); 543 transform: rotateZ(-45deg); 544 right: 0; 545 bottom: 2px; 546 } 547 548 50% { 549 -webkit-transform: rotateZ(-65deg); 550 transform: rotateZ(-65deg); 551 right: 0; 552 } 553 554 68% { 555 -webkit-transform: rotateZ(-410deg); 556 transform: rotateZ(-410deg); 557 right: 27px; 558 bottom: 13px; 559 } 560 561 95% { 562 -webkit-transform: rotateZ(-410deg); 563 transform: rotateZ(-410deg); 564 right: 0; 565 bottom: 0; 566 } 567 568 100% { 569 -webkit-transform: rotateZ(-360deg); 570 transform: rotateZ(-360deg); 571 right: 0; 572 bottom: 0; 573 } 574} 575 576@keyframes particles1 { 577 0% { 578 background-color: rgba(51, 51, 51,0); 579 -webkit-transform: rotateZ(35deg) translateY(0px); 580 transform: rotateZ(35deg) translateY(0px); 581 } 582 583 63% { 584 background-color: rgba(51, 51, 51,0); 585 -webkit-transform: rotateZ(35deg) translateY(0px); 586 transform: rotateZ(35deg) translateY(0px); 587 } 588 589 64% { 590 background-color: rgba(51, 51, 51,1); 591 -webkit-transform: rotateZ(35deg) translateY(0px); 592 transform: rotateZ(35deg) translateY(0px); 593 } 594 595 100% { 596 background-color: rgba(51, 51, 51,0); 597 -webkit-transform: rotateZ(35deg) translateY(-30px); 598 transform: rotateZ(35deg) translateY(-30px); 599 } 600} 601 602@keyframes particles2 { 603 0% { 604 background-color: rgba(51, 51, 51,0); 605 -webkit-transform: rotateZ(-65deg) translateY(0px); 606 transform: rotateZ(-65deg) translateY(0px); 607 } 608 609 63% { 610 background-color: rgba(51, 51, 51,0); 611 -webkit-transform: rotateZ(-65deg) translateY(0px); 612 transform: rotateZ(-65deg) translateY(0px); 613 } 614 615 64% { 616 background-color: rgba(51, 51, 51,1); 617 -webkit-transform: rotateZ(-65deg) translateY(0px); 618 transform: rotateZ(-65deg) translateY(0px); 619 } 620 621 95% { 622 background-color: rgba(51, 51, 51,0); 623 -webkit-transform: rotateZ(-65deg) translateY(-40px); 624 transform: rotateZ(-65deg) translateY(-40px); 625 } 626 627 100% { 628 background-color: rgba(51, 51, 51,0); 629 -webkit-transform: rotateZ(-65deg) translateY(-40px); 630 transform: rotateZ(-65deg) translateY(-40px); 631 } 632} 633 634@keyframes particles3 { 635 0% { 636 background-color: rgba(51, 51, 51,0); 637 -webkit-transform: rotateZ(-75deg) translateY(0px); 638 transform: rotateZ(-75deg) translateY(0px); 639 } 640 641 63% { 642 background-color: rgba(51, 51, 51,0); 643 -webkit-transform: rotateZ(-75deg) translateY(0px); 644 transform: rotateZ(-75deg) translateY(0px); 645 } 646 647 64% { 648 background-color: rgba(51, 51, 51,1); 649 -webkit-transform: rotateZ(-75deg) translateY(0px); 650 transform: rotateZ(-75deg) translateY(0px); 651 } 652 653 97% { 654 background-color: rgba(51, 51, 51,0); 655 -webkit-transform: rotateZ(-75deg) translateY(-35px); 656 transform: rotateZ(-75deg) translateY(-35px); 657 } 658 659 100% { 660 background-color: rgba(51, 51, 51,0); 661 -webkit-transform: rotateZ(-75deg) translateY(-35px); 662 transform: rotateZ(-75deg) translateY(-35px); 663 } 664} 665 666@keyframes particles4 { 667 0% { 668 background-color: rgba(51, 51, 51,0); 669 -webkit-transform: rotateZ(-25deg) translateY(0px); 670 transform: rotateZ(-25deg) translateY(0px); 671 } 672 673 63% { 674 background-color: rgba(51, 51, 51,0); 675 -webkit-transform: rotateZ(-25deg) translateY(0px); 676 transform: rotateZ(-25deg) translateY(0px); 677 } 678 679 64% { 680 background-color: rgba(51, 51, 51,1); 681 -webkit-transform: rotateZ(-25deg) translateY(0px); 682 transform: rotateZ(-25deg) translateY(0px); 683 } 684 685 97% { 686 background-color: rgba(51, 51, 51,0); 687 -webkit-transform: rotateZ(-25deg) translateY(-30px); 688 transform: rotateZ(-25deg) translateY(-30px); 689 } 690 691 100% { 692 background-color: rgba(51, 51, 51,0); 693 -webkit-transform: rotateZ(-25deg) translateY(-30px); 694 transform: rotateZ(-25deg) translateY(-30px); 695 } 696} 697 698@keyframes particles5 { 699 0% { 700 background-color: rgba(51, 51, 51,0); 701 -webkit-transform: rotateZ(65deg) translateY(0px); 702 transform: rotateZ(65deg) translateY(0px); 703 } 704 705 63% { 706 background-color: rgba(51, 51, 51,0); 707 -webkit-transform: rotateZ(65deg) translateY(0px); 708 transform: rotateZ(65deg) translateY(0px); 709 } 710 711 64% { 712 background-color: rgba(51, 51, 51,1); 713 -webkit-transform: rotateZ(65deg) translateY(0px); 714 transform: rotateZ(65deg) translateY(0px); 715 } 716 717 97% { 718 background-color: rgba(51, 51, 51,0); 719 -webkit-transform: rotateZ(65deg) translateY(-35px); 720 transform: rotateZ(65deg) translateY(-35px); 721 } 722 723 100% { 724 background-color: rgba(51, 51, 51,0); 725 -webkit-transform: rotateZ(65deg) translateY(-35px); 726 transform: rotateZ(65deg) translateY(-35px); 727 } 728}
1.3K views
1.3K views
MIT License