.sk-rotating-plane{width:40px;height:40px;background-color:#333;margin:40px auto;-webkit-animation:sk-rotatePlane 1.2s infinite ease-in-out;animation:sk-rotatePlane 1.2s infinite ease-in-out;}
@-webkit-keyframes sk-rotatePlane {
0%{-webkit-transform:perspective(120px) rotateX(0deg) rotateY(0deg);transform:perspective(120px) rotateX(0deg) rotateY(0deg);}
50%{-webkit-transform:perspective(120px) rotateX(-180.1deg) rotateY(0deg);transform:perspective(120px) rotateX(-180.1deg) rotateY(0deg);}
100%{-webkit-transform:perspective(120px) rotateX(-180deg) rotateY(-179.9deg);transform:perspective(120px) rotateX(-180deg) rotateY(-179.9deg);}
}
@keyframes sk-rotatePlane {
0%{-webkit-transform:perspective(120px) rotateX(0deg) rotateY(0deg);transform:perspective(120px) rotateX(0deg) rotateY(0deg);}
50%{-webkit-transform:perspective(120px) rotateX(-180.1deg) rotateY(0deg);transform:perspective(120px) rotateX(-180.1deg) rotateY(0deg);}
100%{-webkit-transform:perspective(120px) rotateX(-180deg) rotateY(-179.9deg);transform:perspective(120px) rotateX(-180deg) rotateY(-179.9deg);}
} .sk-double-bounce{width:40px;height:40px;position:relative;margin:40px auto;}
.sk-double-bounce .sk-child{width:100%;height:100%;border-radius:50%;background-color:#333;opacity:0.6;position:absolute;top:0;left:0;-webkit-animation:sk-doubleBounce 2s infinite ease-in-out;animation:sk-doubleBounce 2s infinite ease-in-out;}
.sk-double-bounce .sk-double-bounce2{-webkit-animation-delay:-1.0s;animation-delay:-1.0s;}
@-webkit-keyframes sk-doubleBounce {
0%, 100%{-webkit-transform:scale(0);transform:scale(0);}
50%{-webkit-transform:scale(1);transform:scale(1);}
}
@keyframes sk-doubleBounce {
0%, 100%{-webkit-transform:scale(0);transform:scale(0);}
50%{-webkit-transform:scale(1);transform:scale(1);}
} .sk-wave{margin:40px auto;width:50px;height:40px;text-align:center;font-size:10px;}
.sk-wave .sk-rect{background-color:#333;height:100%;width:6px;display:inline-block;-webkit-animation:sk-waveStretchDelay 1.2s infinite ease-in-out;animation:sk-waveStretchDelay 1.2s infinite ease-in-out;}
.sk-wave .sk-rect1{-webkit-animation-delay:-1.2s;animation-delay:-1.2s;}
.sk-wave .sk-rect2{-webkit-animation-delay:-1.1s;animation-delay:-1.1s;}
.sk-wave .sk-rect3{-webkit-animation-delay:-1s;animation-delay:-1s;}
.sk-wave .sk-rect4{-webkit-animation-delay:-0.9s;animation-delay:-0.9s;}
.sk-wave .sk-rect5{-webkit-animation-delay:-0.8s;animation-delay:-0.8s;}
@-webkit-keyframes sk-waveStretchDelay {
0%, 40%, 100%{-webkit-transform:scaleY(0.4);transform:scaleY(0.4);}
20%{-webkit-transform:scaleY(1);transform:scaleY(1);}
}
@keyframes sk-waveStretchDelay {
0%, 40%, 100%{-webkit-transform:scaleY(0.4);transform:scaleY(0.4);}
20%{-webkit-transform:scaleY(1);transform:scaleY(1);}
} .sk-wandering-cubes{margin:40px auto;width:40px;height:40px;position:relative;}
.sk-wandering-cubes .sk-cube{background-color:#333;width:10px;height:10px;position:absolute;top:0;left:0;-webkit-animation:sk-wanderingCube 1.8s ease-in-out -1.8s infinite both;animation:sk-wanderingCube 1.8s ease-in-out -1.8s infinite both;}
.sk-wandering-cubes .sk-cube2{-webkit-animation-delay:-0.9s;animation-delay:-0.9s;}
@-webkit-keyframes sk-wanderingCube {
0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}
25%{-webkit-transform:translateX(30px) rotate(-90deg) scale(0.5);transform:translateX(30px) rotate(-90deg) scale(0.5);}
50%{-webkit-transform:translateX(30px) translateY(30px) rotate(-179deg);transform:translateX(30px) translateY(30px) rotate(-179deg);}
50.1%{-webkit-transform:translateX(30px) translateY(30px) rotate(-180deg);transform:translateX(30px) translateY(30px) rotate(-180deg);}
75%{-webkit-transform:translateX(0) translateY(30px) rotate(-270deg) scale(0.5);transform:translateX(0) translateY(30px) rotate(-270deg) scale(0.5);}
100%{-webkit-transform:rotate(-360deg);transform:rotate(-360deg);}
}
@keyframes sk-wanderingCube {
0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}
25%{-webkit-transform:translateX(30px) rotate(-90deg) scale(0.5);transform:translateX(30px) rotate(-90deg) scale(0.5);}
50%{-webkit-transform:translateX(30px) translateY(30px) rotate(-179deg);transform:translateX(30px) translateY(30px) rotate(-179deg);}
50.1%{-webkit-transform:translateX(30px) translateY(30px) rotate(-180deg);transform:translateX(30px) translateY(30px) rotate(-180deg);}
75%{-webkit-transform:translateX(0) translateY(30px) rotate(-270deg) scale(0.5);transform:translateX(0) translateY(30px) rotate(-270deg) scale(0.5);}
100%{-webkit-transform:rotate(-360deg);transform:rotate(-360deg);}
} .sk-spinner-pulse{width:40px;height:40px;margin:40px auto;background-color:#333;border-radius:100%;-webkit-animation:sk-pulseScaleOut 1s infinite ease-in-out;animation:sk-pulseScaleOut 1s infinite ease-in-out;}
@-webkit-keyframes sk-pulseScaleOut {
0%{-webkit-transform:scale(0);transform:scale(0);}
100%{-webkit-transform:scale(1);transform:scale(1);opacity:0;}
}
@keyframes sk-pulseScaleOut {
0%{-webkit-transform:scale(0);transform:scale(0);}
100%{-webkit-transform:scale(1);transform:scale(1);opacity:0;}
} .sk-chasing-dots{margin:40px auto;width:40px;height:40px;position:relative;text-align:center;-webkit-animation:sk-chasingDotsRotate 2s infinite linear;animation:sk-chasingDotsRotate 2s infinite linear;}
.sk-chasing-dots .sk-child{width:60%;height:60%;display:inline-block;position:absolute;top:0;background-color:#333;border-radius:100%;-webkit-animation:sk-chasingDotsBounce 2s infinite ease-in-out;animation:sk-chasingDotsBounce 2s infinite ease-in-out;}
.sk-chasing-dots .sk-dot2{top:auto;bottom:0;-webkit-animation-delay:-1s;animation-delay:-1s;}
@-webkit-keyframes sk-chasingDotsRotate {
100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}
}
@keyframes sk-chasingDotsRotate {
100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}
}
@-webkit-keyframes sk-chasingDotsBounce {
0%, 100%{-webkit-transform:scale(0);transform:scale(0);}
50%{-webkit-transform:scale(1);transform:scale(1);}
}
@keyframes sk-chasingDotsBounce {
0%, 100%{-webkit-transform:scale(0);transform:scale(0);}
50%{-webkit-transform:scale(1);transform:scale(1);}
} .sk-three-bounce{margin:40px auto;width:80px;text-align:center;}
.sk-three-bounce .sk-child{width:20px;height:20px;background-color:#333;border-radius:100%;display:inline-block;-webkit-animation:sk-three-bounce 1.4s ease-in-out 0s infinite both;animation:sk-three-bounce 1.4s ease-in-out 0s infinite both;}
.sk-three-bounce .sk-bounce1{-webkit-animation-delay:-0.32s;animation-delay:-0.32s;}
.sk-three-bounce .sk-bounce2{-webkit-animation-delay:-0.16s;animation-delay:-0.16s;}
@-webkit-keyframes sk-three-bounce {
0%, 80%, 100%{-webkit-transform:scale(0);transform:scale(0);}
40%{-webkit-transform:scale(1);transform:scale(1);}
}
@keyframes sk-three-bounce {
0%, 80%, 100%{-webkit-transform:scale(0);transform:scale(0);}
40%{-webkit-transform:scale(1);transform:scale(1);}
} .sk-circle{margin:40px auto;width:40px;height:40px;position:relative;}
.sk-circle .sk-child{width:100%;height:100%;position:absolute;left:0;top:0;}
.sk-circle .sk-child:before{content:'';display:block;margin:0 auto;width:15%;height:15%;background-color:#333;border-radius:100%;-webkit-animation:sk-circleBounceDelay 1.2s infinite ease-in-out both;animation:sk-circleBounceDelay 1.2s infinite ease-in-out both;}
.sk-circle .sk-circle2{-webkit-transform:rotate(30deg);-ms-transform:rotate(30deg);transform:rotate(30deg);}
.sk-circle .sk-circle3{-webkit-transform:rotate(60deg);-ms-transform:rotate(60deg);transform:rotate(60deg);}
.sk-circle .sk-circle4{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);}
.sk-circle .sk-circle5{-webkit-transform:rotate(120deg);-ms-transform:rotate(120deg);transform:rotate(120deg);}
.sk-circle .sk-circle6{-webkit-transform:rotate(150deg);-ms-transform:rotate(150deg);transform:rotate(150deg);}
.sk-circle .sk-circle7{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);}
.sk-circle .sk-circle8{-webkit-transform:rotate(210deg);-ms-transform:rotate(210deg);transform:rotate(210deg);}
.sk-circle .sk-circle9{-webkit-transform:rotate(240deg);-ms-transform:rotate(240deg);transform:rotate(240deg);}
.sk-circle .sk-circle10{-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg);}
.sk-circle .sk-circle11{-webkit-transform:rotate(300deg);-ms-transform:rotate(300deg);transform:rotate(300deg);}
.sk-circle .sk-circle12{-webkit-transform:rotate(330deg);-ms-transform:rotate(330deg);transform:rotate(330deg);}
.sk-circle .sk-circle2:before{-webkit-animation-delay:-1.1s;animation-delay:-1.1s;}
.sk-circle .sk-circle3:before{-webkit-animation-delay:-1s;animation-delay:-1s;}
.sk-circle .sk-circle4:before{-webkit-animation-delay:-0.9s;animation-delay:-0.9s;}
.sk-circle .sk-circle5:before{-webkit-animation-delay:-0.8s;animation-delay:-0.8s;}
.sk-circle .sk-circle6:before{-webkit-animation-delay:-0.7s;animation-delay:-0.7s;}
.sk-circle .sk-circle7:before{-webkit-animation-delay:-0.6s;animation-delay:-0.6s;}
.sk-circle .sk-circle8:before{-webkit-animation-delay:-0.5s;animation-delay:-0.5s;}
.sk-circle .sk-circle9:before{-webkit-animation-delay:-0.4s;animation-delay:-0.4s;}
.sk-circle .sk-circle10:before{-webkit-animation-delay:-0.3s;animation-delay:-0.3s;}
.sk-circle .sk-circle11:before{-webkit-animation-delay:-0.2s;animation-delay:-0.2s;}
.sk-circle .sk-circle12:before{-webkit-animation-delay:-0.1s;animation-delay:-0.1s;}
@-webkit-keyframes sk-circleBounceDelay {
0%, 80%, 100%{-webkit-transform:scale(0);transform:scale(0);}
40%{-webkit-transform:scale(1);transform:scale(1);}
}
@keyframes sk-circleBounceDelay {
0%, 80%, 100%{-webkit-transform:scale(0);transform:scale(0);}
40%{-webkit-transform:scale(1);transform:scale(1);}
} .sk-cube-grid{width:40px;height:40px;margin:40px auto;}
.sk-cube-grid .sk-cube{width:33.33%;height:33.33%;background-color:#333;float:left;-webkit-animation:sk-cubeGridScaleDelay 1.3s infinite ease-in-out;animation:sk-cubeGridScaleDelay 1.3s infinite ease-in-out;}
.sk-cube-grid .sk-cube1{-webkit-animation-delay:0.2s;animation-delay:0.2s;}
.sk-cube-grid .sk-cube2{-webkit-animation-delay:0.3s;animation-delay:0.3s;}
.sk-cube-grid .sk-cube3{-webkit-animation-delay:0.4s;animation-delay:0.4s;}
.sk-cube-grid .sk-cube4{-webkit-animation-delay:0.1s;animation-delay:0.1s;}
.sk-cube-grid .sk-cube5{-webkit-animation-delay:0.2s;animation-delay:0.2s;}
.sk-cube-grid .sk-cube6{-webkit-animation-delay:0.3s;animation-delay:0.3s;}
.sk-cube-grid .sk-cube7{-webkit-animation-delay:0.0s;animation-delay:0.0s;}
.sk-cube-grid .sk-cube8{-webkit-animation-delay:0.1s;animation-delay:0.1s;}
.sk-cube-grid .sk-cube9{-webkit-animation-delay:0.2s;animation-delay:0.2s;}
@-webkit-keyframes sk-cubeGridScaleDelay {
0%, 70%, 100%{-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1);}
35%{-webkit-transform:scale3D(0, 0, 1);transform:scale3D(0, 0, 1);}
}
@keyframes sk-cubeGridScaleDelay {
0%, 70%, 100%{-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1);}
35%{-webkit-transform:scale3D(0, 0, 1);transform:scale3D(0, 0, 1);}
} .sk-fading-circle{margin:40px auto;width:40px;height:40px;position:relative;}
.sk-fading-circle .sk-circle{width:100%;height:100%;position:absolute;left:0;top:0;}
.sk-fading-circle .sk-circle:before{content:'';display:block;margin:0 auto;width:15%;height:15%;background-color:#333;border-radius:100%;-webkit-animation:sk-circleFadeDelay 1.2s infinite ease-in-out both;animation:sk-circleFadeDelay 1.2s infinite ease-in-out both;}
.sk-fading-circle .sk-circle2{-webkit-transform:rotate(30deg);-ms-transform:rotate(30deg);transform:rotate(30deg);}
.sk-fading-circle .sk-circle3{-webkit-transform:rotate(60deg);-ms-transform:rotate(60deg);transform:rotate(60deg);}
.sk-fading-circle .sk-circle4{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);}
.sk-fading-circle .sk-circle5{-webkit-transform:rotate(120deg);-ms-transform:rotate(120deg);transform:rotate(120deg);}
.sk-fading-circle .sk-circle6{-webkit-transform:rotate(150deg);-ms-transform:rotate(150deg);transform:rotate(150deg);}
.sk-fading-circle .sk-circle7{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);}
.sk-fading-circle .sk-circle8{-webkit-transform:rotate(210deg);-ms-transform:rotate(210deg);transform:rotate(210deg);}
.sk-fading-circle .sk-circle9{-webkit-transform:rotate(240deg);-ms-transform:rotate(240deg);transform:rotate(240deg);}
.sk-fading-circle .sk-circle10{-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg);}
.sk-fading-circle .sk-circle11{-webkit-transform:rotate(300deg);-ms-transform:rotate(300deg);transform:rotate(300deg);}
.sk-fading-circle .sk-circle12{-webkit-transform:rotate(330deg);-ms-transform:rotate(330deg);transform:rotate(330deg);}
.sk-fading-circle .sk-circle2:before{-webkit-animation-delay:-1.1s;animation-delay:-1.1s;}
.sk-fading-circle .sk-circle3:before{-webkit-animation-delay:-1s;animation-delay:-1s;}
.sk-fading-circle .sk-circle4:before{-webkit-animation-delay:-0.9s;animation-delay:-0.9s;}
.sk-fading-circle .sk-circle5:before{-webkit-animation-delay:-0.8s;animation-delay:-0.8s;}
.sk-fading-circle .sk-circle6:before{-webkit-animation-delay:-0.7s;animation-delay:-0.7s;}
.sk-fading-circle .sk-circle7:before{-webkit-animation-delay:-0.6s;animation-delay:-0.6s;}
.sk-fading-circle .sk-circle8:before{-webkit-animation-delay:-0.5s;animation-delay:-0.5s;}
.sk-fading-circle .sk-circle9:before{-webkit-animation-delay:-0.4s;animation-delay:-0.4s;}
.sk-fading-circle .sk-circle10:before{-webkit-animation-delay:-0.3s;animation-delay:-0.3s;}
.sk-fading-circle .sk-circle11:before{-webkit-animation-delay:-0.2s;animation-delay:-0.2s;}
.sk-fading-circle .sk-circle12:before{-webkit-animation-delay:-0.1s;animation-delay:-0.1s;}
@-webkit-keyframes sk-circleFadeDelay {
0%, 39%, 100%{opacity:0;}
40%{opacity:1;}
}
@keyframes sk-circleFadeDelay {
0%, 39%, 100%{opacity:0;}
40%{opacity:1;}
} .sk-folding-cube{margin:40px auto;width:40px;height:40px;position:relative;-webkit-transform:rotateZ(45deg);transform:rotateZ(45deg);}
.sk-folding-cube .sk-cube{float:left;width:50%;height:50%;position:relative;-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1);}
.sk-folding-cube .sk-cube:before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-color:#333;-webkit-animation:sk-foldCubeAngle 2.4s infinite linear both;animation:sk-foldCubeAngle 2.4s infinite linear both;-webkit-transform-origin:100% 100%;-ms-transform-origin:100% 100%;transform-origin:100% 100%;}
.sk-folding-cube .sk-cube2{-webkit-transform:scale(1.1) rotateZ(90deg);transform:scale(1.1) rotateZ(90deg);}
.sk-folding-cube .sk-cube3{-webkit-transform:scale(1.1) rotateZ(180deg);transform:scale(1.1) rotateZ(180deg);}
.sk-folding-cube .sk-cube4{-webkit-transform:scale(1.1) rotateZ(270deg);transform:scale(1.1) rotateZ(270deg);}
.sk-folding-cube .sk-cube2:before{-webkit-animation-delay:0.3s;animation-delay:0.3s;}
.sk-folding-cube .sk-cube3:before{-webkit-animation-delay:0.6s;animation-delay:0.6s;}
.sk-folding-cube .sk-cube4:before{-webkit-animation-delay:0.9s;animation-delay:0.9s;}
@-webkit-keyframes sk-foldCubeAngle {
0%, 10%{-webkit-transform:perspective(140px) rotateX(-180deg);transform:perspective(140px) rotateX(-180deg);opacity:0;}
25%, 75%{-webkit-transform:perspective(140px) rotateX(0deg);transform:perspective(140px) rotateX(0deg);opacity:1;}
90%, 100%{-webkit-transform:perspective(140px) rotateY(180deg);transform:perspective(140px) rotateY(180deg);opacity:0;}
}
@keyframes sk-foldCubeAngle {
0%, 10% {
-webkit-transform: perspective(140px) rotateX(-180deg);
transform: perspective(140px) rotateX(-180deg);
opacity: 0;
}
25%, 75% {
-webkit-transform: perspective(140px) rotateX(0deg);
transform: perspective(140px) rotateX(0deg);
opacity: 1;
}
90%, 100% {
-webkit-transform: perspective(140px) rotateY(180deg);
transform: perspective(140px) rotateY(180deg);
opacity: 0;
}
}