.spinner1 {position:fixed;top:50%;left:50%;margin-left:-20px;margin-top:-20px;width:40px;height:40px}
.double-bounce1,.double-bounce2 {width:100%;height:100%;border-radius:50%;background-color:#fff;opacity:.6;position:absolute;top:0;left:0;-webkit-animation:2s ease-in-out infinite bounce;animation:2s ease-in-out infinite bounce}
.double-bounce2 {-webkit-animation-delay:-1s;animation-delay:-1s}
.spinner2 {position:fixed;top:50%;left:50%;margin-left:-20px;margin-top:-20px;width:40px;height:40px}
.container1>div,.container2>div,.container3>div {width:6px;height:6px;background-color:#fff;border-radius:100%;position:absolute;-webkit-animation:1.2s ease-in-out infinite both bouncedelay;animation:1.2s ease-in-out infinite both bouncedelay}
.spinner2 .spinner-container {position:absolute;width:100%;height:100%}
.container2 {-webkit-transform:rotateZ(45deg);transform:rotateZ(45deg)}
.container3 {-webkit-transform:rotateZ(90deg);transform:rotateZ(90deg)}
.circle1 {top:0;left:0}
.circle2 {top:0;right:0}
.circle3 {right:0;bottom:0}
.circle4 {left:0;bottom:0}
.container2 .circle1 {-webkit-animation-delay:-1.1s;animation-delay:-1.1s}
.container3 .circle1 {-webkit-animation-delay:-1s;animation-delay:-1s}
.container1 .circle2 {-webkit-animation-delay:-.9s;animation-delay:-.9s}
.container2 .circle2 {-webkit-animation-delay:-.8s;animation-delay:-.8s}
.container3 .circle2 {-webkit-animation-delay:-.7s;animation-delay:-.7s}
.container1 .circle3 {-webkit-animation-delay:-.6s;animation-delay:-.6s}
.container2 .circle3 {-webkit-animation-delay:-.5s;animation-delay:-.5s}
.container3 .circle3 {-webkit-animation-delay:-.4s;animation-delay:-.4s}
.container1 .circle4 {-webkit-animation-delay:-.3s;animation-delay:-.3s}
.container2 .circle4 {-webkit-animation-delay:-.2s;animation-delay:-.2s}
.container3 .circle4 {-webkit-animation-delay:-.1s;animation-delay:-.1s}
@-webkit-keyframes bouncedelay {
    0%,100%,80% {-webkit-transform:scale(0)}
    40% {-webkit-transform:scale(1)}
}
@keyframes bouncedelay {
    0%,100%,80% {transform:scale(0);-webkit-transform:scale(0)}
    40% {transform:scale(1);-webkit-transform:scale(1)}
}

.spinner3 {width:40px;height:40px;position:relative;-webkit-animation:2s linear infinite rotate;animation:2s linear infinite rotate}
.dot1,.dot2 {width:60%;height:60%;display:inline-block;position:absolute;top:0;background-color:#fff;border-radius:100%;-webkit-animation:2s ease-in-out infinite bounce;animation:2s ease-in-out infinite bounce}
.dot2 {top:auto;bottom:0;-webkit-animation-delay:-1s;animation-delay:-1s}
@-webkit-keyframes rotate {
    100% {-webkit-transform:rotate(360deg)}
}
@keyframes rotate {
    100% {transform:rotate(360deg);-webkit-transform:rotate(360deg)}
}
@-webkit-keyframes bounce {
    0%,100% {-webkit-transform:scale(0)}
    50% {-webkit-transform:scale(1)}
}
@keyframes bounce {0%,100% {transform:scale(0);-webkit-transform:scale(0)}
50% {transform:scale(1);-webkit-transform:scale(1)}
}

.spinner4 {width:30px;height:30px;background-color:#fff;-webkit-animation:1.2s ease-in-out infinite rotateplane;animation:1.2s ease-in-out infinite rotateplane}
@-webkit-keyframes rotateplane {
    0% {-webkit-transform:perspective(120px)}
    50% {-webkit-transform:perspective(120px) rotateY(180deg)}
    100% {-webkit-transform:perspective(120px) rotateY(180deg) rotateX(180deg)}
}
@keyframes rotateplane {
    0% {transform:perspective(120px) rotateX(0) rotateY(0);-webkit-transform:perspective(120px) rotateX(0) rotateY(0)}
    50% {transform:perspective(120px) rotateX(-180.1deg) rotateY(0);-webkit-transform:perspective(120px) rotateX(-180.1deg) rotateY(0)}
    100% {transform:perspective(120px) rotateX(-180deg) rotateY(-179.9deg);-webkit-transform:perspective(120px) rotateX(-180deg) rotateY(-179.9deg)}
}

.spinner5 {width:32px;height:32px;position:relative}
.cube1,.cube2 {background-color:#fff;width:10px;height:10px;position:absolute;top:0;left:0;-webkit-animation:1.8s ease-in-out infinite cubemove;animation:1.8s ease-in-out infinite cubemove}
.cube2 {-webkit-animation-delay:-.9s;animation-delay:-.9s}
@-webkit-keyframes cubemove {
    25% {-webkit-transform:translateX(42px) rotate(-90deg) scale(.5)}
    50% {-webkit-transform:translateX(42px) translateY(42px) rotate(-180deg)}
    75% {-webkit-transform:translateX(0) translateY(42px) rotate(-270deg) scale(.5)}
    100% {-webkit-transform:rotate(-360deg)}
}
@keyframes cubemove {
    25% {transform:translateX(42px) rotate(-90deg) scale(.5);-webkit-transform:translateX(42px) rotate(-90deg) scale(.5)}
    50% {transform:translateX(42px) translateY(42px) rotate(-179deg);-webkit-transform:translateX(42px) translateY(42px) rotate(-179deg)}
    50.1% {transform:translateX(42px) translateY(42px) rotate(-180deg);-webkit-transform:translateX(42px) translateY(42px) rotate(-180deg)}
    75% {transform:translateX(0) translateY(42px) rotate(-270deg) scale(.5);-webkit-transform:translateX(0) translateY(42px) rotate(-270deg) scale(.5)}
    100% {transform:rotate(-360deg);-webkit-transform:rotate(-360deg)}
}

.spinner6 {width:50px;height:30px;text-align:center}
.spinner6>div {background-color:#fff;height:100%;width:6px;margin-left:2px;display:inline-block;-webkit-animation:1.2s ease-in-out infinite stretchdelay;animation:1.2s ease-in-out infinite stretchdelay}
.spinner6 .rect2 {-webkit-animation-delay:-1.1s;animation-delay:-1.1s}
.spinner6 .rect3 {-webkit-animation-delay:-1s;animation-delay:-1s}
.spinner6 .rect4 {-webkit-animation-delay:-.9s;animation-delay:-.9s}
.spinner6 .rect5 {-webkit-animation-delay:-.8s;animation-delay:-.8s}
@-webkit-keyframes stretchdelay {
    0%,100%,40% {-webkit-transform:scaleY(.4)}
    20% {-webkit-transform:scaleY(1)}
}
@keyframes stretchdelay {
    0%,100%,40% {transform:scaleY(.4);-webkit-transform:scaleY(.4)}
    20% {transform:scaleY(1);-webkit-transform:scaleY(1)}
}

.spinner7 {width:90px;height:30px;text-align:center}
.spinner7>div {background-color:#fff;height:15px;width:15px;margin-left:3px;border-radius:50%;display:inline-block;-webkit-animation:.7s ease-in-out infinite stretchdelay;animation:.7s ease-in-out infinite stretchdelay}
.spinner7 .circ2 {-webkit-animation-delay:-.6s;animation-delay:-.6s}
.spinner7 .circ3 {-webkit-animation-delay:-.5s;animation-delay:-.5s}
.spinner7 .circ4 {-webkit-animation-delay:-.4s;animation-delay:-.4s}
.spinner7 .circ5 {-webkit-animation-delay:-.3s;animation-delay:-.3s}
@-webkit-keyframes stretchdelay {
    0%,100%,40% {-webkit-transform:translateY(-10px)}
    20% {-webkit-transform:translateY(-20px)}
}
@keyframes stretchdelay {
    0%,100%,40% {transform:translateY(-10px);-webkit-transform:translateY(-10px)}
    20% {transform:translateY(-20px);-webkit-transform:translateY(-20px)}
}