| 1 |
/** |
| 2 |
* LoftLoader Lite Frontend Style |
| 3 |
* |
| 4 |
* Plugin Name: LoftLoader |
| 5 |
* Plugin URI: http://www.loftocean.com/loftloader |
| 6 |
* Author: Kaylolo Yinxi Chen @Loft.Ocean |
| 7 |
* Author URI: http://www.loftocean.com |
| 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.2.1 |
| 10 |
*/ |
| 11 |
|
| 12 |
$primary-color: #248acc; |
| 13 |
|
| 14 |
@import 'loftloader-animation'; |
| 15 |
@import 'loftloader-mixins'; |
| 16 |
|
| 17 |
html, |
| 18 |
body { |
| 19 |
opacity: 1 !important; //Prevent site content from being hidden by other plugins before their code get fully loaded. |
| 20 |
} |
| 21 |
|
| 22 |
#loftloader-wrapper { |
| 23 |
position: fixed; |
| 24 |
top: 0; |
| 25 |
left: 0; |
| 26 |
@include transform(translateX(0)); |
| 27 |
z-index: 999999; |
| 28 |
width: 100%; |
| 29 |
height: 100%; |
| 30 |
background: transparent !important; |
| 31 |
|
| 32 |
// After the page content has been loaded: |
| 33 |
.loaded & { |
| 34 |
@include transform(translateX(-200%)); |
| 35 |
visibility: hidden; |
| 36 |
pointer-events: none; |
| 37 |
transition: all; |
| 38 |
transition-delay: 1s; |
| 39 |
|
| 40 |
&.slide-vertical { |
| 41 |
@include verticalend; |
| 42 |
} |
| 43 |
|
| 44 |
// Hide the preloader elements |
| 45 |
#loader, |
| 46 |
.loader-close-button { |
| 47 |
@include endLoader; |
| 48 |
} |
| 49 |
} |
| 50 |
|
| 51 |
.loader-inner { |
| 52 |
position: absolute; |
| 53 |
top: 50%; |
| 54 |
left: 50%; |
| 55 |
@include transform(translate(-50%, -50%)); |
| 56 |
z-index: 1001; |
| 57 |
text-align: center; |
| 58 |
transition: all 0s; |
| 59 |
font-size: 0; |
| 60 |
|
| 61 |
#loader { |
| 62 |
position: relative; |
| 63 |
z-index: 1002; |
| 64 |
display: inline-block; |
| 65 |
margin: 0 auto; |
| 66 |
background: none !important; |
| 67 |
color: $primary-color; |
| 68 |
} |
| 69 |
} |
| 70 |
|
| 71 |
// LoftLoader Background |
| 72 |
.loader-section { |
| 73 |
position: fixed; |
| 74 |
z-index: 999; |
| 75 |
width: 50%; |
| 76 |
height: 100%; |
| 77 |
background: #000; |
| 78 |
opacity: 0.95; |
| 79 |
transition: all 0s; |
| 80 |
will-change: transform; |
| 81 |
|
| 82 |
//Fade |
| 83 |
&.section-fade { |
| 84 |
top: 0; |
| 85 |
left: 0; |
| 86 |
width: 100%; |
| 87 |
will-change: opacity; |
| 88 |
|
| 89 |
.loaded & { |
| 90 |
@include endBgFade; |
| 91 |
} |
| 92 |
} |
| 93 |
|
| 94 |
//Slide Up |
| 95 |
&.section-slide-up { |
| 96 |
top: 0; |
| 97 |
left: 0; |
| 98 |
width: 100%; |
| 99 |
|
| 100 |
.loaded & { |
| 101 |
@include endBgUp; |
| 102 |
} |
| 103 |
} |
| 104 |
|
| 105 |
//Split Horizontally |
| 106 |
&.section-left, |
| 107 |
&.section-right { |
| 108 |
top: 0; |
| 109 |
} |
| 110 |
|
| 111 |
&.section-left { |
| 112 |
left: 0; |
| 113 |
|
| 114 |
.loaded & { |
| 115 |
@include endBgSplitLeft; |
| 116 |
} |
| 117 |
} |
| 118 |
|
| 119 |
&.section-right { |
| 120 |
right: 0; |
| 121 |
|
| 122 |
.loaded & { |
| 123 |
@include endBgSplitRight; |
| 124 |
} |
| 125 |
} |
| 126 |
|
| 127 |
//Split Vertically |
| 128 |
&.section-up, |
| 129 |
&.section-down { |
| 130 |
left: 0; |
| 131 |
width: 100%; |
| 132 |
height: 50%; |
| 133 |
} |
| 134 |
|
| 135 |
&.section-up { |
| 136 |
top: 0; |
| 137 |
|
| 138 |
.loaded & { |
| 139 |
@include endBgSplitUp; |
| 140 |
} |
| 141 |
} |
| 142 |
|
| 143 |
&.section-down { |
| 144 |
bottom: 0; |
| 145 |
|
| 146 |
.loaded & { |
| 147 |
@include endBgSplitDown; |
| 148 |
} |
| 149 |
} |
| 150 |
} |
| 151 |
} |
| 152 |
|
| 153 |
|
| 154 |
/* ========================================================================== |
| 155 |
Loading - Spinning Sun |
| 156 |
========================================================================== */ |
| 157 |
|
| 158 |
#loftloader-wrapper.pl-sun { |
| 159 |
#loader { |
| 160 |
width: 50px; |
| 161 |
height: 50px; |
| 162 |
|
| 163 |
span { |
| 164 |
position: absolute; |
| 165 |
top: 0; |
| 166 |
left: 0; |
| 167 |
display: block; |
| 168 |
width: 50px; |
| 169 |
height: 50px; |
| 170 |
background: currentColor; |
| 171 |
opacity: 0.9; |
| 172 |
transform-origin: 50% 50%; |
| 173 |
@include animation(spinReturn 4s ease infinite); |
| 174 |
|
| 175 |
&:before { |
| 176 |
position: absolute; |
| 177 |
top: 0; |
| 178 |
left: 0; |
| 179 |
display: block; |
| 180 |
width: 100%; |
| 181 |
height: 100%; |
| 182 |
background: inherit; |
| 183 |
opacity: 0.9; |
| 184 |
content: ""; |
| 185 |
transform-origin: 50% 50%; |
| 186 |
@include transform(rotate(45deg)); |
| 187 |
} |
| 188 |
} |
| 189 |
} |
| 190 |
} |
| 191 |
|
| 192 |
|
| 193 |
/* ========================================================================== |
| 194 |
Loading - Luminous Circles |
| 195 |
========================================================================== */ |
| 196 |
|
| 197 |
#loftloader-wrapper.pl-circles { |
| 198 |
#loader { |
| 199 |
width: 100px; |
| 200 |
height: 60px; |
| 201 |
|
| 202 |
span, |
| 203 |
&:before, |
| 204 |
&:after { |
| 205 |
position: absolute; |
| 206 |
display: block; |
| 207 |
width: 10px; |
| 208 |
height: 10px; |
| 209 |
border-radius: 50%; |
| 210 |
opacity: 0.2; |
| 211 |
background: currentColor; |
| 212 |
} |
| 213 |
|
| 214 |
span { |
| 215 |
top: 50%; |
| 216 |
left: 50%; |
| 217 |
@include transform(translate(-50%, -50%)); |
| 218 |
@include animation(lightUp 1.5s linear infinite 0.5s); |
| 219 |
} |
| 220 |
|
| 221 |
&:before, |
| 222 |
&:after { |
| 223 |
content: ""; |
| 224 |
top: 50%; |
| 225 |
@include transform(translate(0, -50%)); |
| 226 |
} |
| 227 |
|
| 228 |
&:before { |
| 229 |
left: 0; |
| 230 |
@include animation(lightUp 1.5s linear infinite); |
| 231 |
} |
| 232 |
|
| 233 |
&:after { |
| 234 |
right: 0; |
| 235 |
@include animation(lightUp 1.5s linear infinite 1s); |
| 236 |
} |
| 237 |
} |
| 238 |
} |
| 239 |
|
| 240 |
|
| 241 |
/* ========================================================================== |
| 242 |
Loading - Wave |
| 243 |
========================================================================== */ |
| 244 |
|
| 245 |
#loftloader-wrapper.pl-wave { |
| 246 |
#loader { |
| 247 |
width: 60px; |
| 248 |
height: 30px; |
| 249 |
|
| 250 |
span, |
| 251 |
&:before, |
| 252 |
&:after { |
| 253 |
position: relative; |
| 254 |
display: inline-block; |
| 255 |
width: 6px; |
| 256 |
height: 100%; |
| 257 |
background: currentColor; |
| 258 |
} |
| 259 |
|
| 260 |
span { |
| 261 |
margin: 0 16px; |
| 262 |
@include animation(wave 0.9s linear infinite 0.3s); |
| 263 |
} |
| 264 |
|
| 265 |
&:before, |
| 266 |
&:after { |
| 267 |
content: ""; |
| 268 |
} |
| 269 |
|
| 270 |
&:before { |
| 271 |
@include animation(wave 0.9s linear infinite); |
| 272 |
} |
| 273 |
|
| 274 |
&:after { |
| 275 |
@include animation(wave 0.9s linear infinite 0.6s); |
| 276 |
} |
| 277 |
} |
| 278 |
} |
| 279 |
|
| 280 |
|
| 281 |
/* ========================================================================== |
| 282 |
Loading - Spinning Square |
| 283 |
========================================================================== */ |
| 284 |
|
| 285 |
#loftloader-wrapper.pl-square { |
| 286 |
#loader { |
| 287 |
width: 50px; |
| 288 |
height: 50px; |
| 289 |
transform-origin: 50% 50%; |
| 290 |
@include animation(spinReturn 4s ease infinite); |
| 291 |
|
| 292 |
span { |
| 293 |
position: absolute; |
| 294 |
top: 0; |
| 295 |
left: 0; |
| 296 |
display: block; |
| 297 |
width: 100%; |
| 298 |
height: 100%; |
| 299 |
border: 4px solid currentColor; |
| 300 |
box-sizing: border-box; |
| 301 |
transform-origin: 50% 50%; |
| 302 |
@include transform(rotate(45deg)); |
| 303 |
} |
| 304 |
} |
| 305 |
} |
| 306 |
|
| 307 |
|
| 308 |
/* ========================================================================== |
| 309 |
Loading - Drawing Frame |
| 310 |
========================================================================== */ |
| 311 |
|
| 312 |
#loftloader-wrapper.pl-frame { |
| 313 |
#loader { |
| 314 |
width: 80px; |
| 315 |
height: 80px; |
| 316 |
max-width: 90vw; |
| 317 |
|
| 318 |
&:before, |
| 319 |
&:after { |
| 320 |
position: absolute; |
| 321 |
width: 100%; |
| 322 |
height: 4px; |
| 323 |
background: currentColor; |
| 324 |
content: ""; |
| 325 |
} |
| 326 |
|
| 327 |
&:before { |
| 328 |
top: 0; |
| 329 |
right: 0; |
| 330 |
left: auto; |
| 331 |
@include animation(drawframeTop 4s linear infinite); |
| 332 |
} |
| 333 |
|
| 334 |
&:after { |
| 335 |
right: auto; |
| 336 |
bottom: 0; |
| 337 |
left: 0; |
| 338 |
@include animation(drawframeBottom 4s linear infinite 1s); |
| 339 |
} |
| 340 |
|
| 341 |
span { |
| 342 |
position: absolute; |
| 343 |
top: 0; |
| 344 |
left: 0; |
| 345 |
display: block; |
| 346 |
width: 100%; |
| 347 |
height: 100%; |
| 348 |
|
| 349 |
&:before, |
| 350 |
&:after { |
| 351 |
position: absolute; |
| 352 |
width: 4px; |
| 353 |
height: 100%; |
| 354 |
background: currentColor; |
| 355 |
content: ""; |
| 356 |
} |
| 357 |
|
| 358 |
&:before { |
| 359 |
top: auto; |
| 360 |
right: 0; |
| 361 |
bottom: 0; |
| 362 |
@include animation(drawframeRight 4s linear infinite 0.5s); |
| 363 |
} |
| 364 |
|
| 365 |
&:after { |
| 366 |
top: 0; |
| 367 |
bottom: auto; |
| 368 |
left: 0; |
| 369 |
@include animation(drawframeLeft 4s linear infinite 1.5s); |
| 370 |
} |
| 371 |
} |
| 372 |
|
| 373 |
img { |
| 374 |
position: absolute; |
| 375 |
top: 50%; |
| 376 |
left: 50%; |
| 377 |
@include transform(translate(-50%, -50%)); |
| 378 |
display: block; |
| 379 |
max-width: 80%; |
| 380 |
max-height: 80%; |
| 381 |
} |
| 382 |
} |
| 383 |
} |
| 384 |
|
| 385 |
|
| 386 |
/* ========================================================================== |
| 387 |
Loading - Loading Custom Image |
| 388 |
========================================================================== */ |
| 389 |
|
| 390 |
#loftloader-wrapper.pl-imgloading { |
| 391 |
#loader { |
| 392 |
@include customImg; |
| 393 |
|
| 394 |
img { |
| 395 |
opacity: 0.3; |
| 396 |
} |
| 397 |
|
| 398 |
.imgloading-container { |
| 399 |
position: absolute; |
| 400 |
bottom: 0; |
| 401 |
left: 0; |
| 402 |
z-index: 3; |
| 403 |
display: block; |
| 404 |
width: 100%; |
| 405 |
height: 0%; |
| 406 |
transition: 0s; |
| 407 |
overflow: hidden; |
| 408 |
@include animation(imgLoading 6s linear infinite); |
| 409 |
will-change: height, opacity; |
| 410 |
transform-origin: 0 100%; |
| 411 |
} |
| 412 |
|
| 413 |
span { |
| 414 |
position: absolute; |
| 415 |
bottom: 0; |
| 416 |
left: 0; |
| 417 |
z-index: 3; |
| 418 |
display: block; |
| 419 |
width: 100%; |
| 420 |
height: 100%; |
| 421 |
background-repeat: no-repeat; |
| 422 |
background-size: cover; |
| 423 |
background-position: center bottom; |
| 424 |
transition: 0s; |
| 425 |
} |
| 426 |
} |
| 427 |
} |
| 428 |
|
| 429 |
|
| 430 |
/* ========================================================================== |
| 431 |
Loading - Beating |
| 432 |
========================================================================== */ |
| 433 |
|
| 434 |
#loftloader-wrapper.pl-beating { |
| 435 |
#loader { |
| 436 |
width: 60px; |
| 437 |
height: 60px; |
| 438 |
|
| 439 |
span, |
| 440 |
&:before { |
| 441 |
position: absolute; |
| 442 |
top: 0; |
| 443 |
left: 0; |
| 444 |
display: block; |
| 445 |
width: 60px; |
| 446 |
height: 60px; |
| 447 |
border-radius: 50%; |
| 448 |
background: currentColor; |
| 449 |
box-shadow: 0 0 50px; |
| 450 |
opacity: 0; |
| 451 |
} |
| 452 |
|
| 453 |
span { |
| 454 |
@include animation(beat 1.5s linear infinite); |
| 455 |
} |
| 456 |
|
| 457 |
&:before { |
| 458 |
content: ""; |
| 459 |
@include animation(beat 1.5s linear infinite 1s); |
| 460 |
} |
| 461 |
} |
| 462 |
} |
| 463 |
|
| 464 |
|
| 465 |
/* ========================================================================== |
| 466 |
Close Button |
| 467 |
========================================================================== */ |
| 468 |
|
| 469 |
.loader-close-button { |
| 470 |
position: fixed; |
| 471 |
right: 10px; |
| 472 |
top: 10px; |
| 473 |
z-index: 99999; |
| 474 |
box-sizing: border-box; |
| 475 |
width: auto; |
| 476 |
min-width: 35px; |
| 477 |
height: 35px; |
| 478 |
padding: 5px 30px 5px 5px; |
| 479 |
border-radius: 999px; |
| 480 |
background: rgba(#000, 0.3); |
| 481 |
color: #FFF; |
| 482 |
font-size: 12px; |
| 483 |
line-height: 25px; |
| 484 |
cursor: pointer; |
| 485 |
|
| 486 |
&:hover { |
| 487 |
background: rgba(#000,0.7); |
| 488 |
} |
| 489 |
|
| 490 |
&:before, |
| 491 |
&:after { |
| 492 |
position: absolute; |
| 493 |
top: 16px; |
| 494 |
right: 9px; |
| 495 |
display: block; |
| 496 |
width: 18px; |
| 497 |
height: 2px; |
| 498 |
transform-origin: 50% 50%; |
| 499 |
content: ""; |
| 500 |
background: #FFF; |
| 501 |
} |
| 502 |
|
| 503 |
&:before { |
| 504 |
@include transform(rotate(45deg)); |
| 505 |
} |
| 506 |
|
| 507 |
&:after { |
| 508 |
@include transform(rotate(135deg)); |
| 509 |
} |
| 510 |
|
| 511 |
.screen-reader-text { |
| 512 |
position: absolute !important; |
| 513 |
width: 1px; |
| 514 |
height: 1px; |
| 515 |
padding: 0; |
| 516 |
margin: -1px; |
| 517 |
border: 0; |
| 518 |
clip: rect(1px, 1px, 1px, 1px); |
| 519 |
clip-path: inset(50%); |
| 520 |
overflow: hidden; |
| 521 |
word-wrap: normal !important; |
| 522 |
} |
| 523 |
|
| 524 |
.close-des { |
| 525 |
padding: 0 5px; |
| 526 |
font-size: 12px; |
| 527 |
} |
| 528 |
} |
| 529 |
|
