added admin interface
This commit is contained in:
kicap1992
233
admin/template_assets/vendor/waitme/_waitMe.scss
vendored
Normal file
233
admin/template_assets/vendor/waitme/_waitMe.scss
vendored
Normal file
@ -0,0 +1,233 @@
|
||||
/*
|
||||
waitMe - 1.19 [31.10.17]
|
||||
Author: vadimsva
|
||||
Github: https://github.com/vadimsva/waitMe
|
||||
*/
|
||||
.waitMe_container:not(body) {transform:translateZ(0);backface-visibility:hidden}
|
||||
body.waitMe_container .waitMe {position:fixed;height:100vh;transform:translateZ(0);backface-visibility:hidden}
|
||||
body.waitMe_container .waitMe .waitMe_content {top:50%!important;transform:none!important}
|
||||
.waitMe_container .waitMe {position:absolute;top:0;left:0;right:0;bottom:0;z-index:9989;text-align:center;overflow:hidden;cursor:wait}
|
||||
.waitMe_container .waitMe * {font-family:inherit;font-size:inherit;font-weight:initial;font-style:initial;line-height:initial;color:initial;text-decoration:initial;text-transform:initial;padding:initial;margin:initial}
|
||||
.waitMe_container .waitMe .waitMe_content {position:absolute;left:0;right:0;top:50%;backface-visibility:hidden}
|
||||
.waitMe_container .waitMe .waitMe_content.horizontal > .waitMe_progress {display:inline-block;vertical-align:middle}
|
||||
.waitMe_container .waitMe .waitMe_content.horizontal > .waitMe_text {display:inline-block;margin:0 0 0 20px;vertical-align:middle}
|
||||
.waitMe_container .waitMe .waitMe_progress {position:relative;font-size:0;line-height:0}
|
||||
.waitMe_container .waitMe .waitMe_progress > div {animation-fill-mode:both;display:inline-block;transform:translateZ(0);backface-visibility:hidden}
|
||||
.waitMe_container .waitMe .waitMe_text {position:relative;margin:20px 0 0}
|
||||
|
||||
/* before load animation */
|
||||
body.waitMe_body {overflow:hidden;height:100%}
|
||||
body.waitMe_body.hideMe {transition:opacity .2s ease-in-out;opacity:0}
|
||||
body.waitMe_body .waitMe_container:not([data-waitme_id]) {position:fixed;z-index:9989;top:0;bottom:0;left:0;right:0;background:#fff}
|
||||
body.waitMe_body .waitMe_container:not([data-waitme_id]) > div {animation-fill-mode:both;position:absolute}
|
||||
body.waitMe_body .waitMe_container.progress > div {width:0;height:3px;top:0;left:0;background:#000;box-shadow:-5px 0 5px 2px rgba(0,0,0,.2);animation:progress_body 7s infinite ease-out}
|
||||
body.waitMe_body .waitMe_container.working > div {width:10%;height:3px;top:0;left:-10%;background:#000;box-shadow:-5px 0 5px 2px rgba(0,0,0,.2);animation:working_body 2s infinite linear}
|
||||
body.waitMe_body .waitMe_container.progress > div:after {content:'';position:absolute;top:0;bottom:60%;right:0;width:60px;border-radius:50%;opacity:.5;transform:rotate(3deg);box-shadow:#000 1px 0 6px 1px}
|
||||
body.waitMe_body .waitMe_container.img > div {width:100%;height:100%;text-align:center;background-position:center!important;background-repeat:no-repeat!important}
|
||||
body.waitMe_body .waitMe_container.text > div {width:100%;top:45%;text-align:center}
|
||||
@keyframes progress_body {
|
||||
0% {width:0}
|
||||
100% {width:100%}
|
||||
}
|
||||
@keyframes working_body {
|
||||
0% {left:-10%}
|
||||
100% {left:100%}
|
||||
}
|
||||
|
||||
|
||||
/* bounce */
|
||||
.waitMe_container .waitMe_progress.bounce > div {width:20px;height:20px;border-radius:50%;animation:bounce 1.4s infinite ease-in-out}
|
||||
.waitMe_container .waitMe_progress.bounce .waitMe_progress_elem1 {animation-delay:-.32s}
|
||||
.waitMe_container .waitMe_progress.bounce .waitMe_progress_elem2 {animation-delay:-.16s}
|
||||
@keyframes bounce {
|
||||
0%, 80%, 100% {transform:scale(0)}
|
||||
40% {transform:scale(1)}
|
||||
}
|
||||
|
||||
|
||||
/* rotateplane */
|
||||
.waitMe_container .waitMe_progress.rotateplane > div {width:30px;height:30px;animation:rotateplane 1.2s infinite ease-in-out;backface-visibility:visible}
|
||||
@keyframes rotateplane {
|
||||
0% {transform:perspective(120px)}
|
||||
50% {transform:perspective(120px) rotateY(180deg)}
|
||||
100% {transform:perspective(120px) rotateY(180deg) rotateX(180deg)}
|
||||
}
|
||||
|
||||
|
||||
/* stretch */
|
||||
.waitMe_container .waitMe_progress.stretch {height:60px}
|
||||
.waitMe_container .waitMe_progress.stretch > div {width:1px;height:100%;margin:0 4px;animation:stretch 1.2s infinite ease-in-out}
|
||||
.waitMe_container .waitMe_progress.stretch .waitMe_progress_elem2 {animation-delay:-1.1s}
|
||||
.waitMe_container .waitMe_progress.stretch .waitMe_progress_elem3 {animation-delay:-1s}
|
||||
.waitMe_container .waitMe_progress.stretch .waitMe_progress_elem4 {animation-delay:-.9s}
|
||||
.waitMe_container .waitMe_progress.stretch .waitMe_progress_elem5 {animation-delay:-.8s}
|
||||
@keyframes stretch {
|
||||
0%, 40%, 100% {transform:scaleY(.4)}
|
||||
20% {transform:scaleY(1)}
|
||||
}
|
||||
|
||||
|
||||
/* orbit */
|
||||
.waitMe_container .waitMe_progress.orbit {width:40px;height:40px;margin:auto;position:relative}
|
||||
.waitMe_container .waitMe_progress.orbit > div {width:100%;height:100%;margin:auto;top:0;left:0;position:absolute;animation:orbit_rotate 2s infinite linear}
|
||||
.waitMe_container .waitMe_progress.orbit > div > div {width:50%;height:50%;border-radius:50%;top:10%;left:10%;position:absolute;animation:orbit 2s infinite ease-in-out}
|
||||
.waitMe_container .waitMe_progress.orbit .waitMe_progress_elem2 > div {top:auto;bottom:10%;left:auto;right:10%;animation-delay:-1s}
|
||||
@keyframes orbit_rotate {
|
||||
0% {transform:rotate(0deg)}
|
||||
100% {transform:rotate(360deg)}
|
||||
}
|
||||
@keyframes orbit {
|
||||
0%, 100% {transform:scale(0)}
|
||||
50% {transform:scale(1)}
|
||||
}
|
||||
|
||||
|
||||
/* roundBounce */
|
||||
.waitMe_container .waitMe_progress.roundBounce {width:60px;height:60px;margin:auto}
|
||||
.waitMe_container .waitMe_progress.roundBounce > div {width:24%;height:24%;border-radius:50%;position:absolute;animation:roundBounce 1.2s infinite ease-in-out}
|
||||
.waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem1 {top:0;left:0}
|
||||
.waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem2 {top:0;right:0}
|
||||
.waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem3 {bottom:0;right:0}
|
||||
.waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem4 {bottom:0;left:0}
|
||||
.waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem5 {top:-3%;left:50%;margin-top:-12%;margin-left:-12%}
|
||||
.waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem6 {top:50%;right:-3%;margin-top:-12%;margin-right:-12%}
|
||||
.waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem7 {bottom:-3%;left:50%;margin-bottom:-12%;margin-left:-12%}
|
||||
.waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem8 {top:50%;left:-3%;margin-top:-12%;margin-left:-12%}
|
||||
.waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem9 {top:0;right:0}
|
||||
.waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem10 {bottom:0;right:0}
|
||||
.waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem11 {bottom:0;left:0}
|
||||
.waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem12 {top:0;left:0}
|
||||
.waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem5 {animation-delay:-1.1s}
|
||||
.waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem9 {animation-delay:-1s}
|
||||
.waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem2 {animation-delay:-.9s}
|
||||
.waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem6 {animation-delay:-.8s}
|
||||
.waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem10 {animation-delay:-.7s}
|
||||
.waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem3 {animation-delay:-.6s}
|
||||
.waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem7 {animation-delay:-.5s}
|
||||
.waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem11 {animation-delay:-.4s}
|
||||
.waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem4 {animation-delay:-.3s}
|
||||
.waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem8 {animation-delay:-.2s}
|
||||
.waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem12 {animation-delay:-.1s}
|
||||
@keyframes roundBounce {
|
||||
0%, 80%, 100% {transform:scale(0)}
|
||||
40% {transform:scale(1)}
|
||||
}
|
||||
|
||||
|
||||
/* win8 */
|
||||
.waitMe_container .waitMe_progress.win8 {width:40px;height:40px;margin:auto}
|
||||
.waitMe_container .waitMe_progress.win8 > div {width:100%;height:100%;opacity:0;position:absolute;margin:auto;left:0;right:0;transform:rotate(225deg);animation:win8 5.5s infinite}
|
||||
.waitMe_container .waitMe_progress.win8 > div > div {width:15%;height:15%;border-radius:50%;position:absolute}
|
||||
.waitMe_container .waitMe_progress.win8 .waitMe_progress_elem2 {animation-delay:.24s}
|
||||
.waitMe_container .waitMe_progress.win8 .waitMe_progress_elem3 {animation-delay:.48s}
|
||||
.waitMe_container .waitMe_progress.win8 .waitMe_progress_elem4 {animation-delay:.72s}
|
||||
.waitMe_container .waitMe_progress.win8 .waitMe_progress_elem5 {animation-delay:.96s}
|
||||
@keyframes win8 {
|
||||
0% {transform:rotate(225deg);animation-timing-function:ease-out}
|
||||
7% {opacity:1;transform:rotate(345deg);animation-timing-function:linear}
|
||||
30% {transform:rotate(455deg);animation-timing-function:ease-in-out}
|
||||
39% {transform:rotate(690deg);animation-timing-function:linear}
|
||||
70% {opacity:1;transform:rotate(815deg);animation-timing-function:ease-out}
|
||||
75% {transform:rotate(945deg);animation-timing-function:ease-out}
|
||||
76% {opacity:0;transform:rotate(945deg)}
|
||||
100% {opacity:0;transform:rotate(945deg)}
|
||||
}
|
||||
|
||||
|
||||
/* win8_linear */
|
||||
.waitMe_container .waitMe_progress.win8_linear {margin:auto;width:150px;height:6px}
|
||||
.waitMe_container .waitMe_progress.win8_linear > div {width:100%;height:100%;left:0;opacity:0;position:absolute;animation:win8_linear 3s infinite}
|
||||
.waitMe_container .waitMe_progress.win8_linear > div > div {width:4%;height:100%;border-radius:50%}
|
||||
.waitMe_container .waitMe_progress.win8_linear .waitMe_progress_elem2 {animation-delay:.3s}
|
||||
.waitMe_container .waitMe_progress.win8_linear .waitMe_progress_elem3 {animation-delay:.6s}
|
||||
.waitMe_container .waitMe_progress.win8_linear .waitMe_progress_elem4 {animation-delay:.9s}
|
||||
.waitMe_container .waitMe_progress.win8_linear .waitMe_progress_elem5 {animation-delay:1.2s}
|
||||
@keyframes win8_linear {
|
||||
0%, 100% {transform:translateX(0);animation-timing-function:ease-out}
|
||||
10% {opacity:1;transform:translateX(33.333%);animation-timing-function:linear}
|
||||
50% {opacity:1;transform:translateX(53.333%);animation-timing-function:ease-in-out}
|
||||
60% {opacity:0;transform:translateX(86.666%)}
|
||||
}
|
||||
|
||||
|
||||
/* ios */
|
||||
.waitMe_container .waitMe_progress.ios {margin:auto;width:40px;height:40px}
|
||||
.waitMe_container .waitMe_progress.ios > div {width:10%;height:26%;position:absolute;left:44.5%;top:37%;opacity:0;border-radius:50px;box-shadow:0 0 3px rgba(0,0,0,.2);animation:ios 1s infinite linear}
|
||||
.waitMe_container .waitMe_progress.ios .waitMe_progress_elem1 {transform:rotate(0deg) translate(0, -142%);animation-delay:0s}
|
||||
.waitMe_container .waitMe_progress.ios .waitMe_progress_elem2 {transform:rotate(30deg) translate(0, -142%);animation-delay:-.9167s}
|
||||
.waitMe_container .waitMe_progress.ios .waitMe_progress_elem3 {transform:rotate(60deg) translate(0, -142%);animation-delay:-.833s}
|
||||
.waitMe_container .waitMe_progress.ios .waitMe_progress_elem4 {transform:rotate(90deg) translate(0, -142%);animation-delay:-.75s}
|
||||
.waitMe_container .waitMe_progress.ios .waitMe_progress_elem5 {transform:rotate(120deg) translate(0, -142%);animation-delay:-.667s}
|
||||
.waitMe_container .waitMe_progress.ios .waitMe_progress_elem6 {transform:rotate(150deg) translate(0, -142%);animation-delay:-.5833s}
|
||||
.waitMe_container .waitMe_progress.ios .waitMe_progress_elem7 {transform:rotate(180deg) translate(0, -142%);animation-delay:-.5s}
|
||||
.waitMe_container .waitMe_progress.ios .waitMe_progress_elem8 {transform:rotate(210deg) translate(0, -142%);animation-delay:-.41667s}
|
||||
.waitMe_container .waitMe_progress.ios .waitMe_progress_elem9 {transform:rotate(240deg) translate(0, -142%);animation-delay:-.333s}
|
||||
.waitMe_container .waitMe_progress.ios .waitMe_progress_elem10 {transform:rotate(270deg) translate(0, -142%);animation-delay:-.25s}
|
||||
.waitMe_container .waitMe_progress.ios .waitMe_progress_elem11 {transform:rotate(300deg) translate(0, -142%);animation-delay:-.1667s}
|
||||
.waitMe_container .waitMe_progress.ios .waitMe_progress_elem12 {transform:rotate(330deg) translate(0, -142%);animation-delay:-.0833s}
|
||||
@keyframes ios {
|
||||
0% {opacity:1}
|
||||
100% {opacity:.25}
|
||||
}
|
||||
|
||||
|
||||
/* facebook */
|
||||
.waitMe_container .waitMe_progress.facebook {margin:auto}
|
||||
.waitMe_container .waitMe_progress.facebook > div {width:6px;height:25px;margin-left:3px;border-radius:20px;transform:scaleY(.7);opacity:.1;animation:facebook 1.3s infinite ease-in-out}
|
||||
.waitMe_container .waitMe_progress.facebook > .waitMe_progress_elem1 {animation-delay:.2s;transform:scaleY(.7)}
|
||||
.waitMe_container .waitMe_progress.facebook > .waitMe_progress_elem2 {animation-delay:.4s;transform:scaleY(.85)}
|
||||
.waitMe_container .waitMe_progress.facebook > .waitMe_progress_elem3 {animation-delay:.6s;transform:scaleY(1)}
|
||||
@keyframes facebook {
|
||||
0% {transform:scaleY(.7);opacity:.1}
|
||||
50% {transform:scaleY(1);opacity:1}
|
||||
100% {transform:scaleY(.7);opacity:.1}
|
||||
}
|
||||
|
||||
|
||||
/* rotation */
|
||||
.waitMe_container .waitMe_progress.rotation > div {width:60px;height:60px;margin:auto;border-radius:100%;border-width:6px;border-style:solid;border-left-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important;animation:rotation 1s infinite linear}
|
||||
@keyframes rotation {
|
||||
0% {transform:rotate(0deg)}
|
||||
100% {transform:rotate(360deg)}
|
||||
}
|
||||
|
||||
|
||||
/* timer */
|
||||
.waitMe_container .waitMe_progress.timer {width:40px;height:40px;margin:auto;border-width:2px;border-style:solid;border-radius:50%;box-sizing:border-box;position:relative;text-indent:-9999px}
|
||||
.waitMe_container .waitMe_progress.timer > .waitMe_progress_elem1,
|
||||
.waitMe_container .waitMe_progress.timer > .waitMe_progress_elem2 {border-radius:3px;position:absolute;width:2px;height:48%;left:50%;top:50%;margin-left:-1px;margin-top:-1px;animation:timer 1.25s infinite linear;transform-origin:1px 1px}
|
||||
.waitMe_container .waitMe_progress.timer > .waitMe_progress_elem2 {height:40%;animation:timer 15s infinite linear}
|
||||
@keyframes timer {
|
||||
0% {transform:rotate(0deg)}
|
||||
100% {transform:rotate(360deg)}
|
||||
}
|
||||
|
||||
|
||||
/* pulse */
|
||||
.waitMe_container .waitMe_progress.pulse {width:30px;height:30px;margin:auto;position:relative}
|
||||
.waitMe_container .waitMe_progress.pulse > div {margin:auto;top:0;left:0;right:0;bottom:0;border-width:3px;border-style:solid;border-radius:50%;position:absolute;opacity:0;animation:pulsate 1s infinite ease-out}
|
||||
@keyframes pulsate {
|
||||
0% {transform:scale(.1);opacity:0}
|
||||
50% {opacity:1}
|
||||
100% {transform:scale(1.2);opacity:0}
|
||||
}
|
||||
|
||||
|
||||
/* progressBar */
|
||||
.waitMe_container .waitMe_progress.progressBar {width:200px;height:20px;margin:auto;background:rgba(0,0,0,.1);padding:5px;border-radius:20px;line-height:0;max-width:100%}
|
||||
.waitMe_container .waitMe_progress.progressBar > div {width:100%;height:100%;overflow:hidden;border-radius:20px;background-size:50px 50px;box-shadow:inset 0 2px 9px rgba(255,255,255,.3), inset 0 -2px 6px rgba(0,0,0,.4);background-image:linear-gradient(-45deg, rgba(240,240,240,.4) 26%, transparent 25%, transparent 51%, rgba(240,240,240,.4) 50%, rgba(240,240,240,.4) 76%, transparent 75%, transparent);animation:progressBar 2s linear infinite}
|
||||
@keyframes progressBar {
|
||||
0% {background-position:0 0}
|
||||
100% {background-position:50px 50px}
|
||||
}
|
||||
|
||||
|
||||
/* bouncePulse */
|
||||
.waitMe_container .waitMe_progress.bouncePulse > div {width:20px;height:20px;margin-right:1px;display:inline-block;border-radius:50%;transform:scale(.5);animation:bouncePulse 1.4s infinite ease-in-out}
|
||||
.waitMe_container .waitMe_progress.bouncePulse > .waitMe_progress_elem1,
|
||||
.waitMe_container .waitMe_progress.bouncePulse > .waitMe_progress_elem3 {animation-delay:.1s}
|
||||
.waitMe_container .waitMe_progress.bouncePulse > .waitMe_progress_elem2 {animation-delay:.4s}
|
||||
@keyframes bouncePulse {
|
||||
0%, 80%, 100% {transform:scale(.5)}
|
||||
40% {transform:scale(1)}
|
||||
}
|
||||
1
admin/template_assets/vendor/waitme/img.svg
vendored
Normal file
1
admin/template_assets/vendor/waitme/img.svg
vendored
Normal file
@ -0,0 +1 @@
|
||||
<svg width='48px' height='48px' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="uil-default"><rect x="0" y="0" width="100" height="100" fill="none" class="bk"></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(0 50 50) translate(0 -30)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(30 50 50) translate(0 -30)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.08333333333333333s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(60 50 50) translate(0 -30)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.16666666666666666s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(90 50 50) translate(0 -30)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.25s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(120 50 50) translate(0 -30)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.3333333333333333s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(150 50 50) translate(0 -30)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.4166666666666667s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(180 50 50) translate(0 -30)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.5s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(210 50 50) translate(0 -30)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.5833333333333334s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(240 50 50) translate(0 -30)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.6666666666666666s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(270 50 50) translate(0 -30)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.75s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(300 50 50) translate(0 -30)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.8333333333333334s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(330 50 50) translate(0 -30)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.9166666666666666s' repeatCount='indefinite'/></rect></svg>
|
||||
|
After Width: | Height: | Size: 3.0 KiB |
233
admin/template_assets/vendor/waitme/waitMe.css
vendored
Normal file
233
admin/template_assets/vendor/waitme/waitMe.css
vendored
Normal file
@ -0,0 +1,233 @@
|
||||
/*
|
||||
waitMe - 1.19 [31.10.17]
|
||||
Author: vadimsva
|
||||
Github: https://github.com/vadimsva/waitMe
|
||||
*/
|
||||
.waitMe_container:not(body) {transform:translateZ(0);backface-visibility:hidden}
|
||||
body.waitMe_container .waitMe {position:fixed;height:100vh;transform:translateZ(0);backface-visibility:hidden}
|
||||
body.waitMe_container .waitMe .waitMe_content {top:50%!important;transform:none!important}
|
||||
.waitMe_container .waitMe {position:absolute;top:0;left:0;right:0;bottom:0;z-index:9989;text-align:center;overflow:hidden;cursor:wait}
|
||||
.waitMe_container .waitMe * {font-family:inherit;font-size:inherit;font-weight:initial;font-style:initial;line-height:initial;color:initial;text-decoration:initial;text-transform:initial;padding:initial;margin:initial}
|
||||
.waitMe_container .waitMe .waitMe_content {position:absolute;left:0;right:0;top:50%;backface-visibility:hidden}
|
||||
.waitMe_container .waitMe .waitMe_content.horizontal > .waitMe_progress {display:inline-block;vertical-align:middle}
|
||||
.waitMe_container .waitMe .waitMe_content.horizontal > .waitMe_text {display:inline-block;margin:0 0 0 20px;vertical-align:middle}
|
||||
.waitMe_container .waitMe .waitMe_progress {position:relative;font-size:0;line-height:0}
|
||||
.waitMe_container .waitMe .waitMe_progress > div {animation-fill-mode:both;display:inline-block;transform:translateZ(0);backface-visibility:hidden}
|
||||
.waitMe_container .waitMe .waitMe_text {position:relative;margin:20px 0 0}
|
||||
|
||||
/* before load animation */
|
||||
body.waitMe_body {overflow:hidden;height:100%}
|
||||
body.waitMe_body.hideMe {transition:opacity .2s ease-in-out;opacity:0}
|
||||
body.waitMe_body .waitMe_container:not([data-waitme_id]) {position:fixed;z-index:9989;top:0;bottom:0;left:0;right:0;background:#fff}
|
||||
body.waitMe_body .waitMe_container:not([data-waitme_id]) > div {animation-fill-mode:both;position:absolute}
|
||||
body.waitMe_body .waitMe_container.progress > div {width:0;height:3px;top:0;left:0;background:#000;box-shadow:-5px 0 5px 2px rgba(0,0,0,.2);animation:progress_body 7s infinite ease-out}
|
||||
body.waitMe_body .waitMe_container.working > div {width:10%;height:3px;top:0;left:-10%;background:#000;box-shadow:-5px 0 5px 2px rgba(0,0,0,.2);animation:working_body 2s infinite linear}
|
||||
body.waitMe_body .waitMe_container.progress > div:after {content:'';position:absolute;top:0;bottom:60%;right:0;width:60px;border-radius:50%;opacity:.5;transform:rotate(3deg);box-shadow:#000 1px 0 6px 1px}
|
||||
body.waitMe_body .waitMe_container.img > div {width:100%;height:100%;text-align:center;background-position:center!important;background-repeat:no-repeat!important}
|
||||
body.waitMe_body .waitMe_container.text > div {width:100%;top:45%;text-align:center}
|
||||
@keyframes progress_body {
|
||||
0% {width:0}
|
||||
100% {width:100%}
|
||||
}
|
||||
@keyframes working_body {
|
||||
0% {left:-10%}
|
||||
100% {left:100%}
|
||||
}
|
||||
|
||||
|
||||
/* bounce */
|
||||
.waitMe_container .waitMe_progress.bounce > div {width:20px;height:20px;border-radius:50%;animation:bounce 1.4s infinite ease-in-out}
|
||||
.waitMe_container .waitMe_progress.bounce .waitMe_progress_elem1 {animation-delay:-.32s}
|
||||
.waitMe_container .waitMe_progress.bounce .waitMe_progress_elem2 {animation-delay:-.16s}
|
||||
@keyframes bounce {
|
||||
0%, 80%, 100% {transform:scale(0)}
|
||||
40% {transform:scale(1)}
|
||||
}
|
||||
|
||||
|
||||
/* rotateplane */
|
||||
.waitMe_container .waitMe_progress.rotateplane > div {width:30px;height:30px;animation:rotateplane 1.2s infinite ease-in-out;backface-visibility:visible}
|
||||
@keyframes rotateplane {
|
||||
0% {transform:perspective(120px)}
|
||||
50% {transform:perspective(120px) rotateY(180deg)}
|
||||
100% {transform:perspective(120px) rotateY(180deg) rotateX(180deg)}
|
||||
}
|
||||
|
||||
|
||||
/* stretch */
|
||||
.waitMe_container .waitMe_progress.stretch {height:60px}
|
||||
.waitMe_container .waitMe_progress.stretch > div {width:1px;height:100%;margin:0 4px;animation:stretch 1.2s infinite ease-in-out}
|
||||
.waitMe_container .waitMe_progress.stretch .waitMe_progress_elem2 {animation-delay:-1.1s}
|
||||
.waitMe_container .waitMe_progress.stretch .waitMe_progress_elem3 {animation-delay:-1s}
|
||||
.waitMe_container .waitMe_progress.stretch .waitMe_progress_elem4 {animation-delay:-.9s}
|
||||
.waitMe_container .waitMe_progress.stretch .waitMe_progress_elem5 {animation-delay:-.8s}
|
||||
@keyframes stretch {
|
||||
0%, 40%, 100% {transform:scaleY(.4)}
|
||||
20% {transform:scaleY(1)}
|
||||
}
|
||||
|
||||
|
||||
/* orbit */
|
||||
.waitMe_container .waitMe_progress.orbit {width:40px;height:40px;margin:auto;position:relative}
|
||||
.waitMe_container .waitMe_progress.orbit > div {width:100%;height:100%;margin:auto;top:0;left:0;position:absolute;animation:orbit_rotate 2s infinite linear}
|
||||
.waitMe_container .waitMe_progress.orbit > div > div {width:50%;height:50%;border-radius:50%;top:10%;left:10%;position:absolute;animation:orbit 2s infinite ease-in-out}
|
||||
.waitMe_container .waitMe_progress.orbit .waitMe_progress_elem2 > div {top:auto;bottom:10%;left:auto;right:10%;animation-delay:-1s}
|
||||
@keyframes orbit_rotate {
|
||||
0% {transform:rotate(0deg)}
|
||||
100% {transform:rotate(360deg)}
|
||||
}
|
||||
@keyframes orbit {
|
||||
0%, 100% {transform:scale(0)}
|
||||
50% {transform:scale(1)}
|
||||
}
|
||||
|
||||
|
||||
/* roundBounce */
|
||||
.waitMe_container .waitMe_progress.roundBounce {width:60px;height:60px;margin:auto}
|
||||
.waitMe_container .waitMe_progress.roundBounce > div {width:24%;height:24%;border-radius:50%;position:absolute;animation:roundBounce 1.2s infinite ease-in-out}
|
||||
.waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem1 {top:0;left:0}
|
||||
.waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem2 {top:0;right:0}
|
||||
.waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem3 {bottom:0;right:0}
|
||||
.waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem4 {bottom:0;left:0}
|
||||
.waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem5 {top:-3%;left:50%;margin-top:-12%;margin-left:-12%}
|
||||
.waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem6 {top:50%;right:-3%;margin-top:-12%;margin-right:-12%}
|
||||
.waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem7 {bottom:-3%;left:50%;margin-bottom:-12%;margin-left:-12%}
|
||||
.waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem8 {top:50%;left:-3%;margin-top:-12%;margin-left:-12%}
|
||||
.waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem9 {top:0;right:0}
|
||||
.waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem10 {bottom:0;right:0}
|
||||
.waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem11 {bottom:0;left:0}
|
||||
.waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem12 {top:0;left:0}
|
||||
.waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem5 {animation-delay:-1.1s}
|
||||
.waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem9 {animation-delay:-1s}
|
||||
.waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem2 {animation-delay:-.9s}
|
||||
.waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem6 {animation-delay:-.8s}
|
||||
.waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem10 {animation-delay:-.7s}
|
||||
.waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem3 {animation-delay:-.6s}
|
||||
.waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem7 {animation-delay:-.5s}
|
||||
.waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem11 {animation-delay:-.4s}
|
||||
.waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem4 {animation-delay:-.3s}
|
||||
.waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem8 {animation-delay:-.2s}
|
||||
.waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem12 {animation-delay:-.1s}
|
||||
@keyframes roundBounce {
|
||||
0%, 80%, 100% {transform:scale(0)}
|
||||
40% {transform:scale(1)}
|
||||
}
|
||||
|
||||
|
||||
/* win8 */
|
||||
.waitMe_container .waitMe_progress.win8 {width:40px;height:40px;margin:auto}
|
||||
.waitMe_container .waitMe_progress.win8 > div {width:100%;height:100%;opacity:0;position:absolute;margin:auto;left:0;right:0;transform:rotate(225deg);animation:win8 5.5s infinite}
|
||||
.waitMe_container .waitMe_progress.win8 > div > div {width:15%;height:15%;border-radius:50%;position:absolute}
|
||||
.waitMe_container .waitMe_progress.win8 .waitMe_progress_elem2 {animation-delay:.24s}
|
||||
.waitMe_container .waitMe_progress.win8 .waitMe_progress_elem3 {animation-delay:.48s}
|
||||
.waitMe_container .waitMe_progress.win8 .waitMe_progress_elem4 {animation-delay:.72s}
|
||||
.waitMe_container .waitMe_progress.win8 .waitMe_progress_elem5 {animation-delay:.96s}
|
||||
@keyframes win8 {
|
||||
0% {transform:rotate(225deg);animation-timing-function:ease-out}
|
||||
7% {opacity:1;transform:rotate(345deg);animation-timing-function:linear}
|
||||
30% {transform:rotate(455deg);animation-timing-function:ease-in-out}
|
||||
39% {transform:rotate(690deg);animation-timing-function:linear}
|
||||
70% {opacity:1;transform:rotate(815deg);animation-timing-function:ease-out}
|
||||
75% {transform:rotate(945deg);animation-timing-function:ease-out}
|
||||
76% {opacity:0;transform:rotate(945deg)}
|
||||
100% {opacity:0;transform:rotate(945deg)}
|
||||
}
|
||||
|
||||
|
||||
/* win8_linear */
|
||||
.waitMe_container .waitMe_progress.win8_linear {margin:auto;width:150px;height:6px}
|
||||
.waitMe_container .waitMe_progress.win8_linear > div {width:100%;height:100%;left:0;opacity:0;position:absolute;animation:win8_linear 3s infinite}
|
||||
.waitMe_container .waitMe_progress.win8_linear > div > div {width:4%;height:100%;border-radius:50%}
|
||||
.waitMe_container .waitMe_progress.win8_linear .waitMe_progress_elem2 {animation-delay:.3s}
|
||||
.waitMe_container .waitMe_progress.win8_linear .waitMe_progress_elem3 {animation-delay:.6s}
|
||||
.waitMe_container .waitMe_progress.win8_linear .waitMe_progress_elem4 {animation-delay:.9s}
|
||||
.waitMe_container .waitMe_progress.win8_linear .waitMe_progress_elem5 {animation-delay:1.2s}
|
||||
@keyframes win8_linear {
|
||||
0%, 100% {transform:translateX(0);animation-timing-function:ease-out}
|
||||
10% {opacity:1;transform:translateX(33.333%);animation-timing-function:linear}
|
||||
50% {opacity:1;transform:translateX(53.333%);animation-timing-function:ease-in-out}
|
||||
60% {opacity:0;transform:translateX(86.666%)}
|
||||
}
|
||||
|
||||
|
||||
/* ios */
|
||||
.waitMe_container .waitMe_progress.ios {margin:auto;width:40px;height:40px}
|
||||
.waitMe_container .waitMe_progress.ios > div {width:10%;height:26%;position:absolute;left:44.5%;top:37%;opacity:0;border-radius:50px;box-shadow:0 0 3px rgba(0,0,0,.2);animation:ios 1s infinite linear}
|
||||
.waitMe_container .waitMe_progress.ios .waitMe_progress_elem1 {transform:rotate(0deg) translate(0, -142%);animation-delay:0s}
|
||||
.waitMe_container .waitMe_progress.ios .waitMe_progress_elem2 {transform:rotate(30deg) translate(0, -142%);animation-delay:-.9167s}
|
||||
.waitMe_container .waitMe_progress.ios .waitMe_progress_elem3 {transform:rotate(60deg) translate(0, -142%);animation-delay:-.833s}
|
||||
.waitMe_container .waitMe_progress.ios .waitMe_progress_elem4 {transform:rotate(90deg) translate(0, -142%);animation-delay:-.75s}
|
||||
.waitMe_container .waitMe_progress.ios .waitMe_progress_elem5 {transform:rotate(120deg) translate(0, -142%);animation-delay:-.667s}
|
||||
.waitMe_container .waitMe_progress.ios .waitMe_progress_elem6 {transform:rotate(150deg) translate(0, -142%);animation-delay:-.5833s}
|
||||
.waitMe_container .waitMe_progress.ios .waitMe_progress_elem7 {transform:rotate(180deg) translate(0, -142%);animation-delay:-.5s}
|
||||
.waitMe_container .waitMe_progress.ios .waitMe_progress_elem8 {transform:rotate(210deg) translate(0, -142%);animation-delay:-.41667s}
|
||||
.waitMe_container .waitMe_progress.ios .waitMe_progress_elem9 {transform:rotate(240deg) translate(0, -142%);animation-delay:-.333s}
|
||||
.waitMe_container .waitMe_progress.ios .waitMe_progress_elem10 {transform:rotate(270deg) translate(0, -142%);animation-delay:-.25s}
|
||||
.waitMe_container .waitMe_progress.ios .waitMe_progress_elem11 {transform:rotate(300deg) translate(0, -142%);animation-delay:-.1667s}
|
||||
.waitMe_container .waitMe_progress.ios .waitMe_progress_elem12 {transform:rotate(330deg) translate(0, -142%);animation-delay:-.0833s}
|
||||
@keyframes ios {
|
||||
0% {opacity:1}
|
||||
100% {opacity:.25}
|
||||
}
|
||||
|
||||
|
||||
/* facebook */
|
||||
.waitMe_container .waitMe_progress.facebook {margin:auto}
|
||||
.waitMe_container .waitMe_progress.facebook > div {width:6px;height:25px;margin-left:3px;border-radius:20px;transform:scaleY(.7);opacity:.1;animation:facebook 1.3s infinite ease-in-out}
|
||||
.waitMe_container .waitMe_progress.facebook > .waitMe_progress_elem1 {animation-delay:.2s;transform:scaleY(.7)}
|
||||
.waitMe_container .waitMe_progress.facebook > .waitMe_progress_elem2 {animation-delay:.4s;transform:scaleY(.85)}
|
||||
.waitMe_container .waitMe_progress.facebook > .waitMe_progress_elem3 {animation-delay:.6s;transform:scaleY(1)}
|
||||
@keyframes facebook {
|
||||
0% {transform:scaleY(.7);opacity:.1}
|
||||
50% {transform:scaleY(1);opacity:1}
|
||||
100% {transform:scaleY(.7);opacity:.1}
|
||||
}
|
||||
|
||||
|
||||
/* rotation */
|
||||
.waitMe_container .waitMe_progress.rotation > div {width:60px;height:60px;margin:auto;border-radius:100%;border-width:6px;border-style:solid;border-left-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important;animation:rotation 1s infinite linear}
|
||||
@keyframes rotation {
|
||||
0% {transform:rotate(0deg)}
|
||||
100% {transform:rotate(360deg)}
|
||||
}
|
||||
|
||||
|
||||
/* timer */
|
||||
.waitMe_container .waitMe_progress.timer {width:40px;height:40px;margin:auto;border-width:2px;border-style:solid;border-radius:50%;box-sizing:border-box;position:relative;text-indent:-9999px}
|
||||
.waitMe_container .waitMe_progress.timer > .waitMe_progress_elem1,
|
||||
.waitMe_container .waitMe_progress.timer > .waitMe_progress_elem2 {border-radius:3px;position:absolute;width:2px;height:48%;left:50%;top:50%;margin-left:-1px;margin-top:-1px;animation:timer 1.25s infinite linear;transform-origin:1px 1px}
|
||||
.waitMe_container .waitMe_progress.timer > .waitMe_progress_elem2 {height:40%;animation:timer 15s infinite linear}
|
||||
@keyframes timer {
|
||||
0% {transform:rotate(0deg)}
|
||||
100% {transform:rotate(360deg)}
|
||||
}
|
||||
|
||||
|
||||
/* pulse */
|
||||
.waitMe_container .waitMe_progress.pulse {width:30px;height:30px;margin:auto;position:relative}
|
||||
.waitMe_container .waitMe_progress.pulse > div {margin:auto;top:0;left:0;right:0;bottom:0;border-width:3px;border-style:solid;border-radius:50%;position:absolute;opacity:0;animation:pulsate 1s infinite ease-out}
|
||||
@keyframes pulsate {
|
||||
0% {transform:scale(.1);opacity:0}
|
||||
50% {opacity:1}
|
||||
100% {transform:scale(1.2);opacity:0}
|
||||
}
|
||||
|
||||
|
||||
/* progressBar */
|
||||
.waitMe_container .waitMe_progress.progressBar {width:200px;height:20px;margin:auto;background:rgba(0,0,0,.1);padding:5px;border-radius:20px;line-height:0;max-width:100%}
|
||||
.waitMe_container .waitMe_progress.progressBar > div {width:100%;height:100%;overflow:hidden;border-radius:20px;background-size:50px 50px;box-shadow:inset 0 2px 9px rgba(255,255,255,.3), inset 0 -2px 6px rgba(0,0,0,.4);background-image:linear-gradient(-45deg, rgba(240,240,240,.4) 26%, transparent 25%, transparent 51%, rgba(240,240,240,.4) 50%, rgba(240,240,240,.4) 76%, transparent 75%, transparent);animation:progressBar 2s linear infinite}
|
||||
@keyframes progressBar {
|
||||
0% {background-position:0 0}
|
||||
100% {background-position:50px 50px}
|
||||
}
|
||||
|
||||
|
||||
/* bouncePulse */
|
||||
.waitMe_container .waitMe_progress.bouncePulse > div {width:20px;height:20px;margin-right:1px;display:inline-block;border-radius:50%;transform:scale(.5);animation:bouncePulse 1.4s infinite ease-in-out}
|
||||
.waitMe_container .waitMe_progress.bouncePulse > .waitMe_progress_elem1,
|
||||
.waitMe_container .waitMe_progress.bouncePulse > .waitMe_progress_elem3 {animation-delay:.1s}
|
||||
.waitMe_container .waitMe_progress.bouncePulse > .waitMe_progress_elem2 {animation-delay:.4s}
|
||||
@keyframes bouncePulse {
|
||||
0%, 80%, 100% {transform:scale(.5)}
|
||||
40% {transform:scale(1)}
|
||||
}
|
||||
289
admin/template_assets/vendor/waitme/waitMe.js
vendored
Normal file
289
admin/template_assets/vendor/waitme/waitMe.js
vendored
Normal file
@ -0,0 +1,289 @@
|
||||
/*
|
||||
waitMe - 1.19 [31.10.17]
|
||||
Author: vadimsva
|
||||
Github: https://github.com/vadimsva/waitMe
|
||||
*/
|
||||
(function($) {
|
||||
$.fn.waitMe = function(method) {
|
||||
return this.each(function() {
|
||||
|
||||
var elem = $(this),
|
||||
elemClass = 'waitMe',
|
||||
waitMe_text,
|
||||
effectObj,
|
||||
effectElemCount,
|
||||
createSubElem = false,
|
||||
specificAttr = 'background-color',
|
||||
addStyle = '',
|
||||
effectElemHTML = '',
|
||||
waitMeObj,
|
||||
_options,
|
||||
currentID;
|
||||
|
||||
var methods = {
|
||||
init : function() {
|
||||
var _defaults = {
|
||||
effect: 'bounce',
|
||||
text: '',
|
||||
bg: 'rgba(255,255,255,0.7)',
|
||||
color: '#000',
|
||||
maxSize: '',
|
||||
waitTime: -1,
|
||||
textPos: 'vertical',
|
||||
fontSize: '',
|
||||
source: '',
|
||||
onClose: function() {}
|
||||
};
|
||||
_options = $.extend(_defaults, method);
|
||||
|
||||
currentID = new Date().getMilliseconds();
|
||||
waitMeObj = $('<div class="' + elemClass + '" data-waitme_id="' + currentID + '"></div>');
|
||||
|
||||
switch (_options.effect) {
|
||||
case 'none':
|
||||
effectElemCount = 0;
|
||||
break;
|
||||
case 'bounce':
|
||||
effectElemCount = 3;
|
||||
break;
|
||||
case 'rotateplane':
|
||||
effectElemCount = 1;
|
||||
break;
|
||||
case 'stretch':
|
||||
effectElemCount = 5;
|
||||
break;
|
||||
case 'orbit':
|
||||
effectElemCount = 2;
|
||||
createSubElem = true;
|
||||
break;
|
||||
case 'roundBounce':
|
||||
effectElemCount = 12;
|
||||
break;
|
||||
case 'win8':
|
||||
effectElemCount = 5;
|
||||
createSubElem = true;
|
||||
break;
|
||||
case 'win8_linear':
|
||||
effectElemCount = 5;
|
||||
createSubElem = true;
|
||||
break;
|
||||
case 'ios':
|
||||
effectElemCount = 12;
|
||||
break;
|
||||
case 'facebook':
|
||||
effectElemCount = 3;
|
||||
break;
|
||||
case 'rotation':
|
||||
effectElemCount = 1;
|
||||
specificAttr = 'border-color';
|
||||
break;
|
||||
case 'timer':
|
||||
effectElemCount = 2;
|
||||
if ($.isArray(_options.color)) {
|
||||
var color = _options.color[0];
|
||||
} else {
|
||||
var color = _options.color;
|
||||
}
|
||||
addStyle = 'border-color:' + color;
|
||||
break;
|
||||
case 'pulse':
|
||||
effectElemCount = 1;
|
||||
specificAttr = 'border-color';
|
||||
break;
|
||||
case 'progressBar':
|
||||
effectElemCount = 1;
|
||||
break;
|
||||
case 'bouncePulse':
|
||||
effectElemCount = 3;
|
||||
break;
|
||||
case 'img':
|
||||
effectElemCount = 1;
|
||||
break;
|
||||
}
|
||||
|
||||
if (addStyle !== '') {
|
||||
addStyle += ';';
|
||||
}
|
||||
|
||||
if (effectElemCount > 0) {
|
||||
if(_options.effect === 'img') {
|
||||
effectElemHTML = '<img src="' + _options.source + '">';
|
||||
} else {
|
||||
for (var i = 1; i <= effectElemCount; ++i) {
|
||||
if ($.isArray(_options.color)) {
|
||||
var color = _options.color[i];
|
||||
if (color == undefined) {
|
||||
color = '#000';
|
||||
}
|
||||
} else {
|
||||
var color = _options.color;
|
||||
}
|
||||
if (createSubElem) {
|
||||
effectElemHTML += '<div class="' + elemClass + '_progress_elem' + i + '"><div style="' + specificAttr +':' + color + '"></div></div>';
|
||||
} else {
|
||||
effectElemHTML += '<div class="' + elemClass + '_progress_elem' + i + '" style="' + specificAttr + ':' + color + '"></div>';
|
||||
}
|
||||
}
|
||||
}
|
||||
effectObj = $('<div class="' + elemClass + '_progress ' + _options.effect + '" style="' + addStyle + '">' + effectElemHTML + '</div>');
|
||||
}
|
||||
|
||||
if (_options.text) {
|
||||
if ($.isArray(_options.color)) {
|
||||
var color = _options.color[0];
|
||||
} else {
|
||||
var color = _options.color;
|
||||
}
|
||||
if (_options.fontSize != '') {
|
||||
var size = 'font-size:'+_options.fontSize;
|
||||
} else {
|
||||
var size = '';
|
||||
}
|
||||
waitMe_text = $('<div class="' + elemClass + '_text" style="color:' + color + ';' + size + '">' + _options.text + '</div>');
|
||||
}
|
||||
var elemObj = elem.find('> .' + elemClass);
|
||||
|
||||
if (elemObj) {
|
||||
elemObj.remove();
|
||||
}
|
||||
var waitMeDivObj = $('<div class="' + elemClass + '_content ' + _options.textPos + '"></div>');
|
||||
waitMeDivObj.append(effectObj, waitMe_text);
|
||||
waitMeObj.append(waitMeDivObj);
|
||||
if (elem[0].tagName == 'HTML') {
|
||||
elem = $('body');
|
||||
}
|
||||
elem.addClass(elemClass + '_container').attr('data-waitme_id', currentID).append(waitMeObj);
|
||||
elemObj = elem.find('> .' + elemClass);
|
||||
var elemContentObj = elem.find('.' + elemClass + '_content');
|
||||
elemObj.css({background: _options.bg});
|
||||
|
||||
if (_options.maxSize !== '' && _options.effect != 'none') {
|
||||
var elemH = effectObj.outerHeight();
|
||||
var elemW = effectObj.outerWidth();
|
||||
var elemMax = elemH;
|
||||
if (_options.effect === 'img') {
|
||||
effectObj.css({height: _options.maxSize + 'px'});
|
||||
effectObj.find('>img').css({maxHeight: '100%'});
|
||||
elemContentObj.css({marginTop: - elemContentObj.outerHeight() / 2 + 'px'});
|
||||
} else {
|
||||
if (_options.maxSize < elemMax) {
|
||||
if (_options.effect == 'stretch') {
|
||||
effectObj.css({height:_options.maxSize + 'px', width:_options.maxSize + 'px'});
|
||||
effectObj.find('> div').css({margin: '0 5%'});
|
||||
} else {
|
||||
var zoom = _options.maxSize / elemMax - 0.2;
|
||||
var offset = '-50%';
|
||||
if (_options.effect == 'roundBounce') {
|
||||
offset = '-75%';
|
||||
if (_options.text) {
|
||||
offset = '75%';
|
||||
}
|
||||
} else if (_options.effect == 'win8' || _options.effect == 'timer' || _options.effect == 'orbit') {
|
||||
offset = '-20%';
|
||||
if (_options.text) {
|
||||
offset = '20%';
|
||||
}
|
||||
} else if (_options.effect == 'ios') {
|
||||
offset = '-15%';
|
||||
if (_options.text) {
|
||||
offset = '15%';
|
||||
}
|
||||
}
|
||||
if (_options.effect == 'rotation') {
|
||||
if (_options.text) {
|
||||
offset = '75%';
|
||||
}
|
||||
}
|
||||
effectObj.css({transform: 'scale('+zoom+') translateX('+offset+')', whiteSpace:'nowrap'});
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
elemContentObj.css({marginTop: - elemContentObj.outerHeight() / 2 + 'px'});
|
||||
|
||||
function setElTop(getTop) {
|
||||
elemContentObj.css({top: 'auto', transform: 'translateY(' + getTop + 'px) translateZ(0)'});
|
||||
}
|
||||
if (elem.outerHeight() > $(window).height()) {
|
||||
var sTop = $(window).scrollTop(),
|
||||
elH = elemContentObj.outerHeight(),
|
||||
elTop = elem.offset().top,
|
||||
cH = elem.outerHeight(),
|
||||
getTop = sTop - elTop + $(window).height()/2;
|
||||
if (getTop < 0) {
|
||||
getTop = Math.abs(getTop);
|
||||
}
|
||||
if (getTop - elH >= 0 && getTop + elH <= cH) {
|
||||
if (elTop - sTop > $(window).height()/2) {
|
||||
getTop = elH;
|
||||
}
|
||||
setElTop(getTop);
|
||||
} else {
|
||||
if (sTop > elTop + cH - elH) {
|
||||
getTop = sTop - elTop - elH;
|
||||
} else {
|
||||
getTop = sTop - elTop + elH;
|
||||
}
|
||||
setElTop(getTop);
|
||||
}
|
||||
$(document).scroll(function() {
|
||||
var sTop = $(window).scrollTop(),
|
||||
getTop = sTop - elTop + $(window).height()/2;
|
||||
if (getTop - elH >= 0 && getTop + elH <= cH) {
|
||||
setElTop(getTop);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (_options.waitTime > 0) {
|
||||
setTimeout(function(){
|
||||
waitMeClose();
|
||||
}, _options.waitTime);
|
||||
}
|
||||
|
||||
elemObj.on('destroyed', function() {
|
||||
if (_options.onClose && $.isFunction(_options.onClose)) {
|
||||
_options.onClose(elem);
|
||||
}
|
||||
elemObj.trigger('close', {el: elem});
|
||||
});
|
||||
|
||||
$.event.special.destroyed = {
|
||||
remove: function(o) {
|
||||
if (o.handler) {
|
||||
o.handler();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return elemObj;
|
||||
},
|
||||
hide : function() {
|
||||
waitMeClose();
|
||||
}
|
||||
};
|
||||
|
||||
function waitMeClose() {
|
||||
var currentID = elem.attr('data-waitme_id');
|
||||
elem.removeClass(elemClass + '_container').removeAttr('data-waitme_id');
|
||||
elem.find('.' + elemClass + '[data-waitme_id="' + currentID + '"]').remove();
|
||||
}
|
||||
|
||||
if (methods[method]) {
|
||||
return methods[method].apply( this, Array.prototype.slice.call(arguments, 1));
|
||||
} else if (typeof method === 'object' || ! method) {
|
||||
return methods.init.apply(this, arguments);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
};
|
||||
$(window).on('load', function(){
|
||||
$('body.waitMe_body').addClass('hideMe');
|
||||
setTimeout(function(){
|
||||
$('body.waitMe_body').find('.waitMe_container:not([data-waitme_id])').remove();
|
||||
$('body.waitMe_body').removeClass('waitMe_body hideMe');
|
||||
},200);
|
||||
});
|
||||
})(jQuery);
|
||||
Reference in New Issue
Block a user