.loader{position:fixed;left:0;right:0;top:0;bottom:0;z-index:11000;background:#ffffff;overflow:hidden;}
#loader{position:fixed;margin:auto;left:0;right:0;top:50%;width:90px;}
#loader ul{margin:0;list-style:none;width:90px;position:relative;padding:0;height:10px;}
#loader ul li:nth-child(odd){background-color:#74a534;}
#loader ul li:nth-child(even){background-color:#07aaa5;}
#loader ul li{position:absolute;width:2px;height:0;bottom:0;}
@-webkit-keyframes sequence1{0%{height:10px;}
50%{height:50px;}
100%{height:10px;}
}
@keyframes sequence1{0%{height:10px;}
50%{height:50px;}
100%{height:10px;}
}
@-webkit-keyframes sequence2{0%{height:20px;}
50%{height:65px;}
100%{height:20px;}
}
@keyframes sequence2{0%{height:20px;}
50%{height:65px;}
100%{height:20px;}
}
#loader li:nth-child(1){left:0;-webkit-animation:sequence1 1s ease infinite;animation:sequence1 1s ease infinite;}
#loader li:nth-child(2){left:15px;-webkit-animation:sequence2 1s ease infinite 0.1s;animation:sequence2 1s ease infinite 0.1s;}
#loader li:nth-child(3){left:30px;-webkit-animation:sequence1 1s ease-in-out infinite 0.2s;animation:sequence1 1s ease-in-out infinite 0.2s;}
#loader li:nth-child(4){left:45px;-webkit-animation:sequence2 1s ease-in infinite 0.3s;animation:sequence2 1s ease-in infinite 0.3s;}
#loader li:nth-child(5){left:60px;-webkit-animation:sequence1 1s ease-in-out infinite 0.4s;animation:sequence1 1s ease-in-out infinite 0.4s;}
#loader li:nth-child(6){left:75px;-webkit-animation:sequence2 1s ease infinite 0.5s;animation:sequence2 1s ease infinite 0.5s;}
@keyframes cssload-invert{100%{-webkit-transform:rotate(180deg);transform:rotate(180deg);}
}
@-webkit-keyframes cssload-invert{100%{-webkit-transform:rotate(180deg);}
}
@keyframes cssload-ball1{12%{-webkit-transform:none;transform:none;}
26%{-webkit-transform:translateX(25%) scale(1, 0.8);transform:translateX(25%) scale(1, 0.8);}
40%{-webkit-transform:translateX(50%) scale(0.8, 0.8);transform:translateX(50%) scale(0.8, 0.8);}
60%{-webkit-transform:translateX(50%) scale(0.8, 0.8);transform:translateX(50%) scale(0.8, 0.8);}
74%{-webkit-transform:translate(50%, 25%) scale(0.6, 0.8);transform:translate(50%, 25%) scale(0.6, 0.8);}
88%{-webkit-transform:translate(50%, 50%) scale(0.6, 0.6);transform:translate(50%, 50%) scale(0.6, 0.6);}
100%{-webkit-transform:translate(50%, 50%) scale(0.6, 0.6);transform:translate(50%, 50%) scale(0.6, 0.6);}
}
@-webkit-keyframes cssload-ball1{12%{-webkit-transform:none;}
26%{-webkit-transform:translateX(25%) scale(1, 0.8);}
40%{-webkit-transform:translateX(50%) scale(0.8, 0.8);}
60%{-webkit-transform:translateX(50%) scale(0.8, 0.8);}
74%{-webkit-transform:translate(50%, 25%) scale(0.6, 0.8);}
88%{-webkit-transform:translate(50%, 50%) scale(0.6, 0.6);}
100%{-webkit-transform:translate(50%, 50%) scale(0.6, 0.6);}
}
@keyframes cssload-ball2{12%{-webkit-transform:none;transform:none;}
26%{-webkit-transform:translateX(25%) scale(1, 0.8);transform:translateX(25%) scale(1, 0.8);}
40%{-webkit-transform:translateX(50%) scale(0.8, 0.8);transform:translateX(50%) scale(0.8, 0.8);}
60%{-webkit-transform:translateX(50%) scale(0.8, 0.8);transform:translateX(50%) scale(0.8, 0.8);}
74%{-webkit-transform:translate(50%, -25%) scale(0.6, 0.8);transform:translate(50%, -25%) scale(0.6, 0.8);}
88%{-webkit-transform:translate(50%, -50%) scale(0.6, 0.6);transform:translate(50%, -50%) scale(0.6, 0.6);}
100%{-webkit-transform:translate(50%, -50%) scale(0.6, 0.6);transform:translate(50%, -50%) scale(0.6, 0.6);}
}
@-webkit-keyframes cssload-ball2{12%{-webkit-transform:none;}
26%{-webkit-transform:translateX(25%) scale(1, 0.8);}
40%{-webkit-transform:translateX(50%) scale(0.8, 0.8);}
60%{-webkit-transform:translateX(50%) scale(0.8, 0.8);}
74%{-webkit-transform:translate(50%, -25%) scale(0.6, 0.8);}
88%{-webkit-transform:translate(50%, -50%) scale(0.6, 0.6);}
100%{-webkit-transform:translate(50%, -50%) scale(0.6, 0.6);}
}
@keyframes cssload-ball3{12%{-webkit-transform:none;transform:none;}
26%{-webkit-transform:translateX(-25%) scale(1, 0.8);transform:translateX(-25%) scale(1, 0.8);}
40%{-webkit-transform:translateX(-50%) scale(0.8, 0.8);transform:translateX(-50%) scale(0.8, 0.8);}
60%{-webkit-transform:translateX(-50%) scale(0.8, 0.8);transform:translateX(-50%) scale(0.8, 0.8);}
74%{-webkit-transform:translate(-50%, 25%) scale(0.6, 0.8);transform:translate(-50%, 25%) scale(0.6, 0.8);}
88%{-webkit-transform:translate(-50%, 50%) scale(0.6, 0.6);transform:translate(-50%, 50%) scale(0.6, 0.6);}
100%{-webkit-transform:translate(-50%, 50%) scale(0.6, 0.6);transform:translate(-50%, 50%) scale(0.6, 0.6);}
}
@-webkit-keyframes cssload-ball3{12%{-webkit-transform:none;}
26%{-webkit-transform:translateX(-25%) scale(1, 0.8);}
40%{-webkit-transform:translateX(-50%) scale(0.8, 0.8);}
60%{-webkit-transform:translateX(-50%) scale(0.8, 0.8);}
74%{-webkit-transform:translate(-50%, 25%) scale(0.6, 0.8);}
88%{-webkit-transform:translate(-50%, 50%) scale(0.6, 0.6);}
100%{-webkit-transform:translate(-50%, 50%) scale(0.6, 0.6);}
}
@keyframes cssload-ball4{12%{-webkit-transform:none;transform:none;}
26%{-webkit-transform:translateX(-25%) scale(1, 0.8);transform:translateX(-25%) scale(1, 0.8);}
40%{-webkit-transform:translateX(-50%) scale(0.8, 0.8);transform:translateX(-50%) scale(0.8, 0.8);}
60%{-webkit-transform:translateX(-50%) scale(0.8, 0.8);transform:translateX(-50%) scale(0.8, 0.8);}
74%{-webkit-transform:translate(-50%, -25%) scale(0.6, 0.8);transform:translate(-50%, -25%) scale(0.6, 0.8);}
88%{-webkit-transform:translate(-50%, -50%) scale(0.6, 0.6);transform:translate(-50%, -50%) scale(0.6, 0.6);}
100%{-webkit-transform:translate(-50%, -50%) scale(0.6, 0.6);transform:translate(-50%, -50%) scale(0.6, 0.6);}
}
@-webkit-keyframes cssload-ball4{12%{-webkit-transform:none;}
26%{-webkit-transform:translateX(-25%) scale(1, 0.8);}
40%{-webkit-transform:translateX(-50%) scale(0.8, 0.8);}
60%{-webkit-transform:translateX(-50%) scale(0.8, 0.8);}
74%{-webkit-transform:translate(-50%, -25%) scale(0.6, 0.8);}
88%{-webkit-transform:translate(-50%, -50%) scale(0.6, 0.6);}
100%{-webkit-transform:translate(-50%, -50%) scale(0.6, 0.6);}
}
.loader.second{background:-webkit-gradient(linear, 0% 0%, 100% 0%, from(#d635d6), to(#ff364f));}
.loader.second #loader ul li{background-color:#FFFFFF;}
.loader.third{background:-webkit-gradient(linear, 0% 0%, 100% 0%, from(#43a1d8), to(#3ce850))}
.loader.third #loader ul li{background-color:#FFFFFF;}
.loader.fourth{background:-webkit-gradient(linear, 0% 0%, 100% 0%, from(#eb8416), to(#ed2371))}
.loader.fourth #loader ul li{background-color:#FFFFFF;}