#loader{background:#2f3030 none repeat scroll 0 0;height:100%;left:0;position:fixed;top:0;width:100%;z-index:99999}
.loader-container{left:0;position:absolute;top:50%;width:100%}
.dots{display:inline-block;position:relative}
.dots:not(:last-child){margin-right:9px}
.dots::before,.dots::after{border-radius:50%;content:"";display:inline-block;height:6px;position:absolute;width:6px}
.dots:nth-child(1)::before{animation:1s linear -.9s normal none infinite running animBefore;background-color:red;transform:translateY(-200%)}
.dots:nth-child(1)::after{animation:1s linear -.9s normal none infinite running animAfter;background-color:#fff;transform:translateY(200%)}
.dots:nth-child(2)::before{animation:1s linear -1.8s normal none infinite running animBefore;background-color:red;transform:translateY(-200%)}
.dots:nth-child(2)::after{animation:1s linear -1.8s normal none infinite running animAfter;background-color:#fff;transform:translateY(200%)}
.dots:nth-child(3)::before{animation:1s linear -2.7s normal none infinite running animBefore;background-color:red;transform:translateY(-200%)}
.dots:nth-child(3)::after{animation:1s linear -2.7s normal none infinite running animAfter;background-color:#fff;transform:translateY(200%)}
.dots:nth-child(4)::before{animation:1s linear -3.6s normal none infinite running animBefore;background-color:red;transform:translateY(-200%)}
.dots:nth-child(4)::after{animation:1s linear -3.6s normal none infinite running animAfter;background-color:#fff;transform:translateY(200%)}
.dots:nth-child(5)::before{animation:1s linear -4.5s normal none infinite running animBefore;background-color:red;transform:translateY(-200%)}
.dots:nth-child(5)::after{animation:1s linear -4.5s normal none infinite running animAfter;background-color:#fff;transform:translateY(200%)}
.dots:nth-child(6)::before{animation:1s linear -5.4s normal none infinite running animBefore;background-color:red;transform:translateY(-200%)}
.dots:nth-child(6)::after{animation:1s linear -5.4s normal none infinite running animAfter;background-color:#fff;transform:translateY(200%)}
.dots:nth-child(7)::before{animation:1s linear -6.3s normal none infinite running animBefore;background-color:red;transform:translateY(-200%)}
.dots:nth-child(7)::after{animation:1s linear -6.3s normal none infinite running animAfter;background-color:#fff;transform:translateY(200%)}
.dots:nth-child(8)::before{animation:1s linear -7.2s normal none infinite running animBefore;background-color:red;transform:translateY(-200%)}
.dots:nth-child(8)::after{animation:1s linear -7.2s normal none infinite running animAfter;background-color:#fff;transform:translateY(200%)}
.dots:nth-child(9)::before{animation:1s linear -8.1s normal none infinite running animBefore;background-color:red;transform:translateY(-200%)}
.dots:nth-child(9)::after{animation:1s linear -8.1s normal none infinite running animAfter;background-color:#fff;transform:translateY(200%)}
.dots:nth-child(10)::before{animation:1s linear -9s normal none infinite running animBefore;background-color:red;transform:translateY(-200%)}
.dots:nth-child(10)::after{animation:1s linear -9s normal none infinite running animAfter;background-color:#fff;transform:translateY(200%)}
@keyframes animBefore {
0%{transform:scale(1) translateY(-200%);z-index:1}
25%{transform:scale(1.3) translateY(0px);z-index:1}
50%{transform:scale(1) translateY(200%);z-index:-1}
75%{transform:scale(0.7) translateY(0px);z-index:-1}
100%{transform:scale(1) translateY(-200%);z-index:-1}
}
@keyframes animAfter {
0%{transform:scale(1) translateY(200%);z-index:-1}
25%{transform:scale(0.7) translateY(0px);z-index:-1}
50%{transform:scale(1) translateY(-200%);z-index:1}
75%{transform:scale(1.3) translateY(0px);z-index:1}
100%{transform:scale(1) translateY(200%);z-index:1}
}