| @@ -1,13 +1,13 @@ | ||
| 1 | 1 | /** |
| 2 | 2 | * LoftLoader Lite Frontend Style |
| 3 | - * | |
| 3 | + * | |
| 4 | 4 | * Plugin Name: LoftLoader |
| 5 | 5 | * Plugin URI: http://www.loftocean.com/loftloader |
| 6 | 6 | * Author: Kaylolo Yinxi Chen @Loft.Ocean |
| 7 | 7 | * Author URI: http://www.loftocean.com |
| 8 | 8 | * Description: LoftLoader (Lite Version) is a plugin for adding beautiful and smooth preload animation to your WordPress website. With setting options, you can choose from preset animations, add custom logo image, choose colours to match your branding, and amuse and impress your visitors while loading site content. |
| 9 | - * Version: 2.0 | |
| 9 | + * Version: 2.3.3 | |
| 10 | 10 | */ |
| 11 | 11 | @-webkit-keyframes spinReturn { |
| 12 | 12 | 0% { |
| 13 | 13 | -webkit-transform: rotate(0deg); } |
| @@ -213,8 +213,28 @@ | ||
| 213 | 213 | opacity: 1; } |
| 214 | 214 | 100% { |
| 215 | 215 | height: 100%; |
| 216 | 216 | opacity: 0; } } |
| 217 | +@-webkit-keyframes beat { | |
| 218 | + 0% { | |
| 219 | + transform: scale(0); | |
| 220 | + opacity: 0; } | |
| 221 | + 80% { | |
| 222 | + transform: scale(1); | |
| 223 | + opacity: 0.7; } | |
| 224 | + 100% { | |
| 225 | + transform: scale(1); | |
| 226 | + opacity: 0; } } | |
| 227 | +@keyframes beat { | |
| 228 | + 0% { | |
| 229 | + transform: scale(0); | |
| 230 | + opacity: 0; } | |
| 231 | + 80% { | |
| 232 | + transform: scale(1); | |
| 233 | + opacity: 0.7; } | |
| 234 | + 100% { | |
| 235 | + transform: scale(1); | |
| 236 | + opacity: 0; } } | |
| 217 | 237 | html, |
| 218 | 238 | body { |
| 219 | 239 | opacity: 1 !important; } |
| 220 | 240 | |
| @@ -229,14 +249,13 @@ | ||
| 229 | 249 | width: 100%; |
| 230 | 250 | height: 100%; |
| 231 | 251 | background: transparent !important; } |
| 232 | 252 | .loaded #loftloader-wrapper { |
| 233 | - -webkit-transform: translateX(-100%); | |
| 234 | - -ms-transform: translateX(-100%); | |
| 235 | - transform: translateX(-100%); | |
| 253 | + -webkit-transform: translateX(-200%); | |
| 254 | + -ms-transform: translateX(-200%); | |
| 255 | + transform: translateX(-200%); | |
| 236 | 256 | visibility: hidden; |
| 237 | 257 | pointer-events: none; |
| 238 | - overflow: hidden; | |
| 239 | 258 | transition: all; |
| 240 | 259 | transition-delay: 1s; } |
| 241 | 260 | .loaded #loftloader-wrapper.slide-vertical { |
| 242 | 261 | -webkit-transform: translate(-100%, 0); |
| @@ -241,9 +260,10 @@ | ||
| 241 | 260 | .loaded #loftloader-wrapper.slide-vertical { |
| 242 | 261 | -webkit-transform: translate(-100%, 0); |
| 243 | 262 | -ms-transform: translate(-100%, 0); |
| 244 | 263 | transform: translate(-100%, 0); } |
| 245 | - .loaded #loftloader-wrapper #loader { | |
| 264 | + .loaded #loftloader-wrapper #loader, | |
| 265 | + .loaded #loftloader-wrapper .loader-close-button { | |
| 246 | 266 | opacity: 0; |
| 247 | 267 | transition: all 0.3s ease-out; } |
| 248 | 268 | #loftloader-wrapper .loader-inner { |
| 249 | 269 | position: absolute; |
| @@ -258,11 +278,17 @@ | ||
| 258 | 278 | font-size: 0; } |
| 259 | 279 | #loftloader-wrapper .loader-inner #loader { |
| 260 | 280 | position: relative; |
| 261 | 281 | z-index: 1002; |
| 282 | + top: auto; | |
| 283 | + left: auto; | |
| 262 | 284 | display: inline-block; |
| 263 | 285 | margin: 0 auto; |
| 264 | - color: #248ACC; } | |
| 286 | + padding: 0; | |
| 287 | + border: none; | |
| 288 | + border-radius: 0; | |
| 289 | + background: none !important; | |
| 290 | + color: #248acc; } | |
| 265 | 291 | #loftloader-wrapper .loader-section { |
| 266 | 292 | position: fixed; |
| 267 | 293 | z-index: 999; |
| 268 | 294 | width: 50%; |
| @@ -517,9 +543,9 @@ | ||
| 517 | 543 | height: auto; |
| 518 | 544 | margin: 0 auto; } |
| 519 | 545 | #loftloader-wrapper.pl-imgloading #loader img { |
| 520 | 546 | opacity: 0.3; } |
| 521 | - #loftloader-wrapper.pl-imgloading #loader span { | |
| 547 | + #loftloader-wrapper.pl-imgloading #loader .imgloading-container { | |
| 522 | 548 | position: absolute; |
| 523 | 549 | bottom: 0; |
| 524 | 550 | left: 0; |
| 525 | 551 | z-index: 3; |
| @@ -526,11 +552,100 @@ | ||
| 526 | 552 | display: block; |
| 527 | 553 | width: 100%; |
| 528 | 554 | height: 0%; |
| 529 | 555 | transition: 0s; |
| 556 | + overflow: hidden; | |
| 557 | + -webkit-animation: imgLoading 6s linear infinite; | |
| 558 | + animation: imgLoading 6s linear infinite; | |
| 559 | + will-change: height, opacity; | |
| 560 | + transform-origin: 0 100%; } | |
| 561 | + #loftloader-wrapper.pl-imgloading #loader span { | |
| 562 | + position: absolute; | |
| 563 | + bottom: 0; | |
| 564 | + left: 0; | |
| 565 | + z-index: 3; | |
| 566 | + display: block; | |
| 567 | + width: 100%; | |
| 568 | + height: 100%; | |
| 530 | 569 | background-repeat: no-repeat; |
| 531 | 570 | background-size: cover; |
| 532 | 571 | background-position: center bottom; |
| 533 | - -webkit-animation: imgLoading 6s linear infinite; | |
| 534 | - animation: imgLoading 6s linear infinite; } | |
| 572 | + transition: 0s; } | |
| 535 | 573 | |
| 536 | -/*# sourceMappingURL=loftloader.css.map */ | |
| 574 | +/* ========================================================================== | |
| 575 | + Loading - Beating | |
| 576 | + ========================================================================== */ | |
| 577 | +#loftloader-wrapper.pl-beating #loader { | |
| 578 | + width: 60px; | |
| 579 | + height: 60px; } | |
| 580 | + #loftloader-wrapper.pl-beating #loader span, #loftloader-wrapper.pl-beating #loader:before { | |
| 581 | + position: absolute; | |
| 582 | + top: 0; | |
| 583 | + left: 0; | |
| 584 | + display: block; | |
| 585 | + width: 60px; | |
| 586 | + height: 60px; | |
| 587 | + border-radius: 50%; | |
| 588 | + background: currentColor; | |
| 589 | + box-shadow: 0 0 50px; | |
| 590 | + opacity: 0; } | |
| 591 | + #loftloader-wrapper.pl-beating #loader span { | |
| 592 | + -webkit-animation: beat 1.5s linear infinite; | |
| 593 | + animation: beat 1.5s linear infinite; } | |
| 594 | + #loftloader-wrapper.pl-beating #loader:before { | |
| 595 | + content: ""; | |
| 596 | + -webkit-animation: beat 1.5s linear infinite 1s; | |
| 597 | + animation: beat 1.5s linear infinite 1s; } | |
| 598 | + | |
| 599 | +/* ========================================================================== | |
| 600 | + Close Button | |
| 601 | + ========================================================================== */ | |
| 602 | +.loader-close-button { | |
| 603 | + position: fixed; | |
| 604 | + right: 10px; | |
| 605 | + top: 10px; | |
| 606 | + z-index: 99999; | |
| 607 | + box-sizing: border-box; | |
| 608 | + width: auto; | |
| 609 | + min-width: 35px; | |
| 610 | + height: 35px; | |
| 611 | + padding: 5px 30px 5px 5px; | |
| 612 | + border-radius: 999px; | |
| 613 | + background: rgba(0, 0, 0, 0.3); | |
| 614 | + color: #FFF; | |
| 615 | + font-size: 12px; | |
| 616 | + line-height: 25px; | |
| 617 | + cursor: pointer; } | |
| 618 | + .loader-close-button:hover { | |
| 619 | + background: rgba(0, 0, 0, 0.7); } | |
| 620 | + .loader-close-button:before, .loader-close-button:after { | |
| 621 | + position: absolute; | |
| 622 | + top: 16px; | |
| 623 | + right: 9px; | |
| 624 | + display: block; | |
| 625 | + width: 18px; | |
| 626 | + height: 2px; | |
| 627 | + transform-origin: 50% 50%; | |
| 628 | + content: ""; | |
| 629 | + background: #FFF; } | |
| 630 | + .loader-close-button:before { | |
| 631 | + -webkit-transform: rotate(45deg); | |
| 632 | + -ms-transform: rotate(45deg); | |
| 633 | + transform: rotate(45deg); } | |
| 634 | + .loader-close-button:after { | |
| 635 | + -webkit-transform: rotate(135deg); | |
| 636 | + -ms-transform: rotate(135deg); | |
| 637 | + transform: rotate(135deg); } | |
| 638 | + .loader-close-button .screen-reader-text { | |
| 639 | + position: absolute !important; | |
| 640 | + width: 1px; | |
| 641 | + height: 1px; | |
| 642 | + padding: 0; | |
| 643 | + margin: -1px; | |
| 644 | + border: 0; | |
| 645 | + clip: rect(1px, 1px, 1px, 1px); | |
| 646 | + clip-path: inset(50%); | |
| 647 | + overflow: hidden; | |
| 648 | + word-wrap: normal !important; } | |
| 649 | + .loader-close-button .close-des { | |
| 650 | + padding: 0 5px; | |
| 651 | + font-size: 12px; } | |
