.loader{position:fixed;top:50%;left:50%;z-index:9999;width:100px;height:100px;margin:0 auto;border-radius:100%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}#loader-1::after,#loader-1::before{position:absolute;top:-10px;left:-10px;width:100%;height:100%;content:"";border:10px solid transparent;border-top-color:#3498db;border-radius:100%}#loader-1::before{z-index:100;animation:spin 1s infinite}#loader-1::after{border:10px solid #ccc}@keyframes spin{0%{-webkit-transform:rotate(0);-ms-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}#loader-2 span{display:inline-block;width:20px;height:20px;margin:35px 5px;background-color:#3498db;border-radius:100%}#loader-2 span:nth-child(1){animation:bounce 1s ease-in-out infinite}#loader-2 span:nth-child(2){animation:bounce 1s ease-in-out .33s infinite}#loader-2 span:nth-child(3){animation:bounce 1s ease-in-out .66s infinite}@keyframes bounce{0%,100%,75%{-webkit-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)}25%{-webkit-transform:translateY(-20px);-ms-transform:translateY(-20px);-o-transform:translateY(-20px);transform:translateY(-20px)}}#loader-3::after,#loader-3::before{position:absolute;top:0;left:calc(50% - 10px);width:20px;height:20px;content:"";background-color:#3498db;animation:squaremove 1s ease-in-out infinite}#loader-3::after{bottom:0;animation-delay:.5s}@keyframes squaremove{0%,100%{-webkit-transform:translate(0,0) rotate(0);-ms-transform:translate(0,0) rotate(0);-o-transform:translate(0,0) rotate(0);transform:translate(0,0) rotate(0)}25%{-webkit-transform:translate(40px,40px) rotate(45deg);-ms-transform:translate(40px,40px) rotate(45deg);-o-transform:translate(40px,40px) rotate(45deg);transform:translate(40px,40px) rotate(45deg)}50%{-webkit-transform:translate(0,80px) rotate(0);-ms-transform:translate(0,80px) rotate(0);-o-transform:translate(0,80px) rotate(0);transform:translate(0,80px) rotate(0)}75%{-webkit-transform:translate(-40px,40px) rotate(45deg);-ms-transform:translate(-40px,40px) rotate(45deg);-o-transform:translate(-40px,40px) rotate(45deg);transform:translate(-40px,40px) rotate(45deg)}}#loader-4 span{display:inline-block;width:20px;height:20px;margin:35px 5px;background-color:#3498db;border-radius:100%;opacity:0}#loader-4 span:nth-child(1){animation:opacitychange 1s ease-in-out infinite}#loader-4 span:nth-child(2){animation:opacitychange 1s ease-in-out .33s infinite}#loader-4 span:nth-child(3){animation:opacitychange 1s ease-in-out .66s infinite}@keyframes opacitychange{0%,100%{opacity:0}60%{opacity:1}}#loader-5 span{position:absolute;top:calc(50% - 20px);left:calc(50% - 20px);display:block;width:20px;height:20px;background-color:#3498db}#loader-5 span:nth-child(2){animation:moveanimation1 1s ease-in-out infinite}#loader-5 span:nth-child(3){animation:moveanimation2 1s ease-in-out infinite}#loader-5 span:nth-child(4){animation:moveanimation3 1s ease-in-out infinite}@keyframes moveanimation1{0%,100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);-o-transform:translateX(0);transform:translateX(0)}75%{-webkit-transform:translateX(30px);-ms-transform:translateX(30px);-o-transform:translateX(30px);transform:translateX(30px)}}@keyframes moveanimation2{0%,100%{-webkit-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)}75%{-webkit-transform:translateY(30px);-ms-transform:translateY(30px);-o-transform:translateY(30px);transform:translateY(30px)}}@keyframes moveanimation3{0%,100%{-webkit-transform:translate(0,0);-ms-transform:translate(0,0);-o-transform:translate(0,0);transform:translate(0,0)}75%{-webkit-transform:translate(30px,30px);-ms-transform:translate(30px,30px);-o-transform:translate(30px,30px);transform:translate(30px,30px)}}#loader-6{top:40px;left:-2.5px}#loader-6 span{display:inline-block;width:5px;height:20px;background-color:#3498db}#loader-6 span:nth-child(1){animation:grow 1s ease-in-out infinite}#loader-6 span:nth-child(2){animation:grow 1s ease-in-out .15s infinite}#loader-6 span:nth-child(3){animation:grow 1s ease-in-out .3s infinite}#loader-6 span:nth-child(4){animation:grow 1s ease-in-out .45s infinite}@keyframes grow{0%,100%{-webkit-transform:scaleY(1);-ms-transform:scaleY(1);-o-transform:scaleY(1);transform:scaleY(1)}50%{-webkit-transform:scaleY(1.8);-ms-transform:scaleY(1.8);-o-transform:scaleY(1.8);transform:scaleY(1.8)}}#loader-7{-webkit-perspective:120px;-moz-perspective:120px;-ms-perspective:120px;perspective:120px}#loader-7::before{position:absolute;top:25px;left:25px;width:50px;height:50px;content:"";background-color:#3498db;animation:flip 1s infinite}@keyframes flip{0%{transform:rotate(0)}50%{transform:rotateY(180deg)}100%{transform:rotateY(180deg) rotateX(180deg)}}#loader-8::before{position:absolute;top:calc(50% - 10px);left:0;width:10px;height:10px;content:"";background-color:#3498db;animation:rotatemove 1s infinite}@keyframes rotatemove{0%{-webkit-transform:scale(1) translateX(0);-ms-transform:scale(1) translateX(0);-o-transform:scale(1) translateX(0);transform:scale(1) translateX(0)}100%{-webkit-transform:scale(2) translateX(45px);-ms-transform:scale(2) translateX(45px);-o-transform:scale(2) translateX(45px);transform:scale(2) translateX(45px)}}