.waitMe_container {
position
:
relative
;transform:translateZ(
0
);backface-
visibility
:
hidden
}
body.waitMe_container {
position
:
fixed
;
width
:
100%
;
height
:
100%
}
.waitMe_container .waitMe {
position
:
absolute
;
top
:
0
;
left
:
0
;
right
:
0
;
bottom
:
0
;
z-index
:
9989
;
text-align
:
center
;
overflow
:
hidden
}
.waitMe_container .waitMe * {
font-family
:
sans-serif
;
font-size
:
14px
;
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_progress {
position
:
relative
;
font-size
:
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
}
body.waitMe_body {
overflow
:
hidden
;
height
:
100%
}
body.waitMe_body.hideMe {transition:opacity .
2
s 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
7
s 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
2
s 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(
3
deg);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%
}
}
.waitMe_container .waitMe_progress.bounce > div {
width
:
20px
;
height
:
20px
;border-radius:
50%
;animation:bounce
1.4
s infinite ease-in-out}
.waitMe_container .waitMe_progress.bounce .waitMe_progress_elem
1
{animation-delay:-.
32
s}
.waitMe_container .waitMe_progress.bounce .waitMe_progress_elem
2
{animation-delay:-.
16
s}
@keyframes bounce {
0%
,
80%
,
100%
{transform:scale(
0
)}
40%
{transform:scale(
1
)}
}
.waitMe_container .waitMe_progress.rotateplane > div {
width
:
30px
;
height
:
30px
;animation:rotateplane
1.2
s infinite ease-in-out;backface-
visibility
:
visible
}
@keyframes rotateplane {
0%
{transform:perspective(
120px
)}
50%
{transform:perspective(
120px
) rotateY(
180
deg)}
100%
{transform:perspective(
120px
) rotateY(
180
deg) rotateX(
180
deg)}
}
.waitMe_container .waitMe_progress.stretch > div {
width
:
1px
;
height
:
60px
;
margin
:
4px
;animation:stretch
1.2
s infinite ease-in-out}
.waitMe_container .waitMe_progress.stretch .waitMe_progress_elem
2
{animation-delay:
-1.1
s}
.waitMe_container .waitMe_progress.stretch .waitMe_progress_elem
3
{animation-delay:
-1
s}
.waitMe_container .waitMe_progress.stretch .waitMe_progress_elem
4
{animation-delay:-.
9
s}
.waitMe_container .waitMe_progress.stretch .waitMe_progress_elem
5
{animation-delay:-.
8
s}
@keyframes stretch {
0%
,
40%
,
100%
{transform:scaleY(.
4
)}
20%
{transform:scaleY(
1
)}
}
.waitMe_container .waitMe_progress.orbit {
width
:
40px
;
height
:
40px
;
margin
:
auto
;animation:orbit_rotate
2
s infinite linear}
.waitMe_container .waitMe_progress.orbit > div {
width
:
50%
;
height
:
50%
;border-radius:
50%
;
top
:
10%
;
left
:
10%
;
position
:
absolute
;animation:orbit
2
s infinite ease-in-out}
.waitMe_container .waitMe_progress.orbit .waitMe_progress_elem
2
{
top
:
auto
;
bottom
:
10%
;
left
:
auto
;
right
:
10%
;animation-delay:
-1
s}
@keyframes orbit_rotate {
100%
{transform:rotate(
360
deg) scale(
1
)}
}
@keyframes orbit {
0%
,
100%
{transform:scale(
0
)}
50%
{transform:scale(
1
)}
}
.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.2
s infinite ease-in-out}
.waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem
1
{
top
:
0
;
left
:
0
}
.waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem
2
{
top
:
0
;
right
:
0
}
.waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem
3
{
bottom
:
0
;
right
:
0
}
.waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem
4
{
bottom
:
0
;
left
:
0
}
.waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem
5
{
top
:
-3%
;
left
:
50%
;
margin-top
:
-12%
;
margin-left
:
-12%
}
.waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem
6
{
top
:
50%
;
right
:
-3%
;
margin-top
:
-12%
;
margin-right
:
-12%
}
.waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem
7
{
bottom
:
-3%
;
left
:
50%
;
margin-bottom
:
-12%
;
margin-left
:
-12%
}
.waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem
8
{
top
:
50%
;
left
:
-3%
;
margin-top
:
-12%
;
margin-left
:
-12%
}
.waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem
9
{
top
:
0
;
right
:
0
}
.waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem
10
{
bottom
:
0
;
right
:
0
}
.waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem
11
{
bottom
:
0
;
left
:
0
}
.waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem
12
{
top
:
0
;
left
:
0
}
.waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem
5
{animation-delay:
-1.1
s}
.waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem
9
{animation-delay:
-1
s}
.waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem
2
{animation-delay:-.
9
s}
.waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem
6
{animation-delay:-.
8
s}
.waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem
10
{animation-delay:-.
7
s}
.waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem
3
{animation-delay:-.
6
s}
.waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem
7
{animation-delay:-.
5
s}
.waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem
11
{animation-delay:-.
4
s}
.waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem
4
{animation-delay:-.
3
s}
.waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem
8
{animation-delay:-.
2
s}
.waitMe_container .waitMe_progress.roundBounce .waitMe_progress_elem
12
{animation-delay:-.
1
s}
@keyframes roundBounce {
0%
,
80%
,
100%
{transform:scale(
0
)}
40%
{transform:scale(
1
)}
}
.waitMe_container .waitMe_progress.win
8
{
width
:
40px
;
height
:
40px
;
margin
:
auto
}
.waitMe_container .waitMe_progress.win
8
> div {
width
:
100%
;
height
:
100%
;opacity:
0
;
position
:
absolute
;
margin
:
auto
;
left
:
0
;
right
:
0
;transform:rotate(
225
deg);animation:win
8
5.5
s infinite}
.waitMe_container .waitMe_progress.win
8
> div > div {
width
:
15%
;
height
:
15%
;border-radius:
50%
;
position
:
absolute
}
.waitMe_container .waitMe_progress.win
8
.waitMe_progress_elem
2
{animation-delay:.
24
s}
.waitMe_container .waitMe_progress.win
8
.waitMe_progress_elem
3
{animation-delay:.
48
s}
.waitMe_container .waitMe_progress.win
8
.waitMe_progress_elem
4
{animation-delay:.
72
s}
.waitMe_container .waitMe_progress.win
8
.waitMe_progress_elem
5
{animation-delay:.
96
s}
@keyframes win
8
{
0%
{transform:rotate(
225
deg);animation-timing-function:ease-out}
7%
{opacity:
1
;transform:rotate(
345
deg);animation-timing-function:linear}
30%
{transform:rotate(
455
deg);animation-timing-function:ease-in-out}
39%
{transform:rotate(
690
deg);animation-timing-function:linear}
70%
{opacity:
1
;transform:rotate(
815
deg);animation-timing-function:ease-out}
75%
{transform:rotate(
945
deg);animation-timing-function:ease-out}
76%
{opacity:
0
;transform:rotate(
945
deg)}
100%
{opacity:
0
;transform:rotate(
945
deg)}
}
.waitMe_container .waitMe_progress.win
8
_linear {
margin
:
auto
;
width
:
150px
;
height
:
6px
}
.waitMe_container .waitMe_progress.win
8
_linear > div {
width
:
100%
;
height
:
100%
;
left
:
0
;opacity:
0
;
position
:
absolute
;animation:win
8
_linear
3
s infinite}
.waitMe_container .waitMe_progress.win
8
_linear > div > div {
width
:
4%
;
height
:
100%
;border-radius:
50%
}
.waitMe_container .waitMe_progress.win
8
_linear .waitMe_progress_elem
2
{animation-delay:.
3
s}
.waitMe_container .waitMe_progress.win
8
_linear .waitMe_progress_elem
3
{animation-delay:.
6
s}
.waitMe_container .waitMe_progress.win
8
_linear .waitMe_progress_elem
4
{animation-delay:.
9
s}
.waitMe_container .waitMe_progress.win
8
_linear .waitMe_progress_elem
5
{animation-delay:
1.2
s}
@keyframes win
8
_linear {
0%
{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%
)}
}
.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
1
s infinite linear}
.waitMe_container .waitMe_progress.ios .waitMe_progress_elem
1
{transform:rotate(
0
deg) translate(
0
,
-142%
);animation-delay:
0
s}
.waitMe_container .waitMe_progress.ios .waitMe_progress_elem
2
{transform:rotate(
30
deg) translate(
0
,
-142%
);animation-delay:-.
9167
s}
.waitMe_container .waitMe_progress.ios .waitMe_progress_elem
3
{transform:rotate(
60
deg) translate(
0
,
-142%
);animation-delay:-.
833
s}
.waitMe_container .waitMe_progress.ios .waitMe_progress_elem
4
{transform:rotate(
90
deg) translate(
0
,
-142%
);animation-delay:-.
75
s}
.waitMe_container .waitMe_progress.ios .waitMe_progress_elem
5
{transform:rotate(
120
deg) translate(
0
,
-142%
);animation-delay:-.
667
s}
.waitMe_container .waitMe_progress.ios .waitMe_progress_elem
6
{transform:rotate(
150
deg) translate(
0
,
-142%
);animation-delay:-.
5833
s}
.waitMe_container .waitMe_progress.ios .waitMe_progress_elem
7
{transform:rotate(
180
deg) translate(
0
,
-142%
);animation-delay:-.
5
s}
.waitMe_container .waitMe_progress.ios .waitMe_progress_elem
8
{transform:rotate(
210
deg) translate(
0
,
-142%
);animation-delay:-.
41667
s}
.waitMe_container .waitMe_progress.ios .waitMe_progress_elem
9
{transform:rotate(
240
deg) translate(
0
,
-142%
);animation-delay:-.
333
s}
.waitMe_container .waitMe_progress.ios .waitMe_progress_elem
10
{transform:rotate(
270
deg) translate(
0
,
-142%
);animation-delay:-.
25
s}
.waitMe_container .waitMe_progress.ios .waitMe_progress_elem
11
{transform:rotate(
300
deg) translate(
0
,
-142%
);animation-delay:-.
1667
s}
.waitMe_container .waitMe_progress.ios .waitMe_progress_elem
12
{transform:rotate(
330
deg) translate(
0
,
-142%
);animation-delay:-.
0833
s}
@keyframes ios {
0%
{opacity:
1
}
100%
{opacity:.
25
}
}
.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.3
s infinite ease-in-out}
.waitMe_container .waitMe_progress.facebook > .waitMe_progress_elem
1
{animation-delay:.
2
s;transform:scaleY(.
7
)}
.waitMe_container .waitMe_progress.facebook > .waitMe_progress_elem
2
{animation-delay:.
4
s;transform:scaleY(.
85
)}
.waitMe_container .waitMe_progress.facebook > .waitMe_progress_elem
3
{animation-delay:.
6
s;transform:scaleY(
1
)}
@keyframes facebook {
0%
{transform:scaleY(.
7
);opacity:.
1
}
50%
{transform:scaleY(
1
);opacity:
1
}
100%
{transform:scaleY(.
7
);opacity:.
1
}
}
.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
1
s infinite linear}
@keyframes rotation {
0%
{transform:rotate(
0
deg)}
100%
{transform:rotate(
360
deg)}
}
.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_elem
1
,
.waitMe_container .waitMe_progress.timer > .waitMe_progress_elem
2
{border-radius:
3px
;
position
:
absolute
;
width
:
2px
;
height
:
48%
;
left
:
50%
;
top
:
50%
;
margin-left
:
-1px
;
margin-top
:
-1px
;animation:timer
1.25
s infinite linear;transform-origin:
1px
1px
}
.waitMe_container .waitMe_progress.timer > .waitMe_progress_elem
2
{
height
:
40%
;animation:timer
15
s infinite linear}
@keyframes timer {
0%
{transform:rotate(
0
deg)}
100%
{transform:rotate(
360
deg)}
}
.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
1
s infinite ease-out}
@keyframes pulsate {
0%
{transform:scale(.
1
);opacity:
0
}
50%
{opacity:
1
}
100%
{transform:scale(
1.2
);opacity:
0
}
}
.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(
-45
deg, 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
2
s linear infinite}
@keyframes progressBar {
0%
{
background-position
:
0
0
}
100%
{
background-position
:
50px
50px
}
}
.waitMe_container .waitMe_progress.bouncePulse > div {
width
:
20px
;
height
:
20px
;
margin-right
:
1%
;
display
:inline-
block
;border-radius:
50%
;transform:scale(.
5
);animation:bouncePulse
1.4
s infinite ease-in-out}
.waitMe_container .waitMe_progress.bouncePulse > .waitMe_progress_elem
1
,
.waitMe_container .waitMe_progress.bouncePulse > .waitMe_progress_elem
3
{animation-delay:.
3
s}
.waitMe_container .waitMe_progress.bouncePulse > .waitMe_progress_elem
2
{animation-delay:.
1
s}
@keyframes bouncePulse {
0%
,
90%
,
100%
{transform:scale(.
5
)}
45%
{transform:scale(
1
)}
}