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