.box{width:100%;box-sizing:border-box;overflow:hidden; background:#000; opacity:0.7; position:fixed;top:0}
.box .loader{width:100%;height:100%; float:left;box-sizing:border-box;display:flex;align-items:center;justify-content:center}
@-webkit-keyframes loading-1{0%{transform:rotate(0)}
50%{transform:rotate(180deg)}
100%{transform:rotate(360deg)}
}
.loading-1{width:35px;height:35px;position:relative}
.loading-1 i{display:block;width:100%;height:100%;border-radius:50%;background:linear-gradient(transparent 0,transparent 70%,#333 30%,#333 100%);-webkit-animation:loading-1 .6s linear 0s infinite}
@-webkit-keyframes loading-2{0%{transform:scaleY(1)}
50%{transform:scaleY(.4)}
100%{transform:scaleY(1)}
}
.loading-2 i{display:inline-block;width:4px;height:35px;border-radius:2px;margin:0 2px;background-color:#333}
.loading-2 i:nth-child(1){-webkit-animation:loading-2 1s ease-in .1s infinite}
.loading-2 i:nth-child(2){-webkit-animation:loading-2 1s ease-in .2s infinite}
.loading-2 i:nth-child(3){-webkit-animation:loading-2 1s ease-in .3s infinite}
.loading-2 i:nth-child(4){-webkit-animation:loading-2 1s ease-in .4s infinite}
.loading-2 i:nth-child(5){-webkit-animation:loading-2 1s ease-in .5s infinite}
@-webkit-keyframes loading-3{50%{transform:scale(.4);opacity:.3}
100%{transform:scale(1);opacity:1}
}
.loading-3{position:relative}
.loading-3 i{display:block;width:15px;height:15px;border-radius:50%;background-color:#333;position:absolute}
.loading-3 i:nth-child(1){top:25px;left:0;-webkit-animation:loading-3 1s ease 0s infinite}
.loading-3 i:nth-child(2){top:17px;left:17px;-webkit-animation:loading-3 1s ease -.12s infinite}
.loading-3 i:nth-child(3){top:0;left:25px;-webkit-animation:loading-3 1s ease -.24s infinite}
.loading-3 i:nth-child(4){top:-17px;left:17px;-webkit-animation:loading-3 1s ease -.36s infinite}
.loading-3 i:nth-child(5){top:-25px;left:0;-webkit-animation:loading-3 1s ease -.48s infinite}
.loading-3 i:nth-child(6){top:-17px;left:-17px;-webkit-animation:loading-3 1s ease -.6s infinite}
.loading-3 i:nth-child(7){top:0;left:-25px;-webkit-animation:loading-3 1s ease -.72s infinite}
.loading-3 i:nth-child(8){top:17px;left:-17px;-webkit-animation:loading-3 1s ease -.84s infinite}