.ok-loading {
|
background: #fbfbfb;
|
color: #333333;
|
font-size: 100%;
|
margin: 0;
|
padding: 0;
|
position: fixed;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
z-index: 999;
|
}
|
.ok-loading.close {
|
animation: close 1s;
|
-webkit-animation: close 1s;
|
animation-fill-mode: forwards;
|
}
|
.loader {
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
-webkit-transform: translate(-50%, -50%);
|
-moz-transform: translate(-50%, -50%);
|
-mos-transform: translate(-50%, -50%);
|
-o-transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
text-align: center;
|
-webkit-touch-callout: none;
|
-webkit-user-select: none;
|
-khtml-user-select: none;
|
-moz-user-select: none;
|
-ms-user-select: none;
|
user-select: none;
|
cursor: default
|
}
|
.text {
|
position: absolute;
|
left: -1.3em;
|
top: -1.7em;
|
white-space: nowrap;
|
-webkit-animation: text 2s infinite;
|
-moz-animation: text 2s infinite;
|
-moz-animation: text 2s infinite;
|
-ms-animation: text 2s infinite;
|
-o-animation: text 2s infinite;
|
animation: text 2s infinite
|
}
|
.vertical {
|
position: absolute;
|
top: -1.84em;
|
left: -.4em;
|
-webkit-transform: rotate(90deg);
|
-moz-transform: rotate(90deg);
|
-ms-transform: rotate(90deg);
|
-o-transform: rotate(90deg);
|
transform: rotate(90deg)
|
}
|
.horizontal {
|
position: absolute;
|
top: 0;
|
left: 0;
|
-webkit-transform: rotate(0deg);
|
-moz-transform: rotate(0deg);
|
-ms-transform: rotate(0deg);
|
-o-transform: rotate(0deg);
|
transform: rotate(0deg)
|
}
|
.circlesup {
|
position: absolute;
|
top: -4.7em;
|
right: 12.1em
|
}
|
.circlesdwn {
|
position: absolute;
|
top: 2.5em;
|
right: -13.5em;
|
-webkit-transform: rotate(180deg);
|
-moz-transform: rotate(180deg);
|
-ms-transform: rotate(180deg);
|
-o-transform: rotate(180deg);
|
transform: rotate(180deg)
|
}
|
.circle {
|
position: absolute;
|
width: 15em;
|
height: 15em;
|
-webkit-transform: rotate(45deg);
|
-moz-transform: rotate(45deg);
|
-ms-transform: rotate(45deg);
|
-o-transform: rotate(45deg);
|
transform: rotate(45deg);
|
-webkit-animation: orbit 2s infinite;
|
-moz-animation: orbit 2s infinite;
|
-moz-animation: orbit 2s infinite;
|
-ms-animation: orbit 2s infinite;
|
-o-animation: orbit 2s infinite;
|
animation: orbit 2s infinite;
|
z-index: 5
|
}
|
.circle:after {
|
content: '';
|
position: absolute;
|
width: 2em;
|
height: 2em;
|
-webkit-border-radius: 100%;
|
-moz-border-radius: 100%;
|
-ms-border-radius: 100%;
|
-o-border-radius: 100%;
|
border-radius: 100%;
|
background: #13a3a5
|
}
|
.circle:nth-child(2) {
|
-webkit-animation-delay: 100ms;
|
-moz-animation-delay: 100ms;
|
-ms-animation-delay: 100ms;
|
-o-animation-delay: 100ms;
|
animation-delay: 100ms;
|
z-index: 4
|
}
|
.circle:nth-child(2):after {
|
background: #56bebf;
|
-webkit-transform: scale(.8, .8);
|
-moz-transform: scale(.8, .8);
|
-ms-transform: scale(.8, .8);
|
-o-transform: scale(.8, .8);
|
transform: scale(.8, .8)
|
}
|
.circle:nth-child(3) {
|
-webkit-animation-delay: 225ms;
|
-moz-animation-delay: 225ms;
|
-ms-animation-delay: 225ms;
|
-o-animation-delay: 225ms;
|
animation-delay: 225ms;
|
z-index: 3
|
}
|
.circle:nth-child(3):after {
|
background: #ffa489;
|
-webkit-transform: scale(.6, .6);
|
-moz-transform: scale(.6, .6);
|
-ms-transform: scale(.6, .6);
|
-o-transform: scale(.6, .6);
|
transform: scale(.6, .6)
|
}
|
.circle:nth-child(4) {
|
-webkit-animation-delay: 350ms;
|
-moz-animation-delay: 350ms;
|
-ms-animation-delay: 350ms;
|
-o-animation-delay: 350ms;
|
animation-delay: 350ms;
|
z-index: 2
|
}
|
.circle:nth-child(4):after {
|
background: #ff6d37;
|
-webkit-transform: scale(.4, .4);
|
-moz-transform: scale(.4, .4);
|
-ms-transform: scale(.4, .4);
|
-o-transform: scale(.4, .4);
|
transform: scale(.4, .4)
|
}
|
.circle:nth-child(5) {
|
-webkit-animation-delay: 475ms;
|
-moz-animation-delay: 475ms;
|
-ms-animation-delay: 475ms;
|
-o-animation-delay: 475ms;
|
animation-delay: 475ms;
|
z-index: 1
|
}
|
.circle:nth-child(5):after {
|
background: #db2f00;
|
-webkit-transform: scale(.2, .2);
|
-moz-transform: scale(.2, .2);
|
-ms-transform: scale(.2, .2);
|
-o-transform: scale(.2, .2);
|
transform: scale(.2, .2)
|
}
|
@-webkit-keyframes orbit {
|
0% {
|
-webkit-transform: rotate(45deg)
|
}
|
5% {
|
-webkit-transform: rotate(45deg);
|
-webkit-animation-timing-function: ease-out
|
}
|
70% {
|
-webkit-transform: rotate(405deg);
|
-webkit-animation-timing-function: ease-in
|
}
|
100% {
|
-webkit-transform: rotate(405deg)
|
}
|
}
|
@-moz-keyframes orbit {
|
0% {
|
-moz-transform: rotate(45deg)
|
}
|
5% {
|
-moz-transform: rotate(45deg);
|
-moz-animation-timing-function: ease-out
|
}
|
70% {
|
-moz-transform: rotate(405deg);
|
-moz-animation-timing-function: ease-in
|
}
|
100% {
|
-moz-transform: rotate(405deg)
|
}
|
}
|
@-ms-keyframes orbit {
|
0% {
|
-ms-transform: rotate(45deg)
|
}
|
5% {
|
-ms-transform: rotate(45deg);
|
-ms-animation-timing-function: ease-out
|
}
|
70% {
|
-ms-transform: rotate(405deg);
|
-ms-animation-timing-function: ease-in
|
}
|
100% {
|
-ms-transform: rotate(405deg)
|
}
|
}
|
@-o-keyframes orbit {
|
0% {
|
-o-transform: rotate(45deg)
|
}
|
5% {
|
-o-transform: rotate(45deg);
|
-o-animation-timing-function: ease-out
|
}
|
70% {
|
-o-transform: rotate(405deg);
|
-o-animation-timing-function: ease-in
|
}
|
100% {
|
-o-transform: rotate(405deg)
|
}
|
}
|
@keyframes orbit {
|
0% {
|
transform: rotate(45deg)
|
}
|
5% {
|
transform: rotate(45deg);
|
animation-timing-function: ease-out
|
}
|
70% {
|
transform: rotate(405deg);
|
animation-timing-function: ease-in
|
}
|
100% {
|
transform: rotate(405deg)
|
}
|
}
|
@-webkit-keyframes text {
|
0% {
|
-webkit-transform: scale(.2, .2);
|
-webkit-animation-timing-function: ease-out
|
}
|
40%, 60% {
|
-webkit-transform: scale(1, 1);
|
-webkit-animation-timing-function: ease-out
|
}
|
70%, 100% {
|
-webkit-transform: scale(.2, .2)
|
}
|
}
|
@-moz-keyframes text {
|
0% {
|
-moz-transform: scale(.2, .2);
|
-moz-animation-timing-function: ease-out
|
}
|
50% {
|
-moz-transform: scale(1, 1);
|
-moz-animation-timing-function: ease-out
|
}
|
60% {
|
-moz-transform: scale(1, 1);
|
-moz-animation-timing-function: ease-out
|
}
|
100% {
|
-moz-transform: scale(.2, .2)
|
}
|
}
|
@-o-keyframes text {
|
0% {
|
-o-transform: scale(.2, .2);
|
-o-animation-timing-function: ease-out
|
}
|
50% {
|
-o-transform: scale(1, 1);
|
-o-animation-timing-function: ease-out
|
}
|
60% {
|
-o-transform: scale(1, 1);
|
-o-animation-timing-function: ease-out
|
}
|
100% {
|
-o-transform: scale(.2, .2)
|
}
|
}
|
@keyframes text {
|
0% {
|
transform: scale(.2, .2);
|
animation-timing-function: ease-out
|
}
|
50% {
|
transform: scale(1, 1);
|
animation-timing-function: ease-out
|
}
|
60% {
|
transform: scale(1, 1);
|
animation-timing-function: ease-out
|
}
|
100% {
|
transform: scale(.2, .2)
|
}
|
}
|
|
/*@keyframes close {
|
0% {
|
opacity: 1;
|
display: block;
|
}
|
100% {
|
opacity: 0;
|
display: none;
|
}
|
}
|
@-ms-keyframes close {
|
0% {
|
opacity: 1;
|
display: block;
|
}
|
100% {
|
opacity: 0;
|
display: none;
|
}
|
}
|
@-o-keyframes close {
|
0% {
|
opacity: 1;
|
display: block;
|
}
|
100% {
|
opacity: 0;
|
display: none;
|
}
|
}
|
@-moz-keyframes close {
|
0% {
|
opacity: 1;
|
display: block;
|
}
|
100% {
|
opacity: 0;
|
display: none;
|
}
|
}*/
|
@-webkit-keyframes close {
|
0% {
|
opacity: 1;
|
/*display: block;*/
|
}
|
100% {
|
opacity: 0;
|
/*display: none;*/
|
}
|
}
|
