<div class="divBox"><div class="loader"><div class="loading-1"><i></i><i></i><i></i></div></div><div class="loader"><div class="loading-2"><i></i><i></i></div></div><div class="loader"><div class="loading-3"><i></i><i></i><i></i><i></i><i></i></div></div>
</div>

.divBox{ width: 100%; padding: 3%; box-sizing:border-box;
}
.loader{ width: 30%; height: 260px; float: left; border:1px solid #ccc; margin-right: 3%;
}/*第一个loading动画*/
.loading-1{ position: relative; width: 60px; height: 60px; margin: 100px auto;
}
.loading-1 i{background-color: #333; width: 60px; height: 60px; border-radius: 50%; position: absolute; left: 0; top: 0; opacity: 0;
}
/*为第一个loading动画定义关键帧*/
@keyframes loading01{0%{ transform: scale(0); opacity: 0; }5%{ opacity: 1; }100%{ transform: scale(1); opacity: 0; }
}
.loading-1 i:nth-child(1){animation: loading01 1s linear 0s infinite;
}
.loading-1 i:nth-child(2){animation: loading01 1s linear 0.2s infinite;
}
.loading-1 i:nth-child(3){animation: loading01 1s linear 0.4s infinite;
}
/*第二个loading动画*/
.loading-2{ width: 40px; height: 40px; margin: 110px auto; position: relative;
}
/*为第二个loading动画定义关键帧*/
@keyframes loading-2{0%{ transform: rotate(0deg) scale(1); }50%{ transform: rotate(180deg) scale(0.6); }100%{ transform: rotate(360deg) scale(1); }
}
.loading-2 i{ position: absolute; border:2px solid #333; border-color: transparent #333; border-radius: 50%;
}
.loading-2 i:first-child{ width: 40px; height: 40px; left: 0; top: 0; animation: loading-2 1s ease-in-out 0s infinite;
}
.loading-2 i:last-child{ width: 20px; height: 20px; left: 10px; top: 10px; animation: loading-2 1s ease-in-out 0.4s infinite reverse
}
/*第三个loaing动画*/
.loading-3{ width: 80px; height: 20px; position: relative; margin: 120px auto;
}
/*为第三个loading动画定义关键帧*/
@keyframes loading03{0%{ left:100px; top: 0; }80%{ left:0; top: 0; }85%{ left:0; top: -20px; width: 20px; height: 20px; }90%{ width: 80px; height: 10px; }95%{ left:100px; top: -20px; width: 20px; height: 20px; }100%{ left:100px; top: 0; }
}
.loading-3 i{ width: 20px; height: 20px; position: absolute; border-radius: 50%; background-color: #333;
}
.loading-3 i:nth-child(1){ animation: loading03 2s linear 0s infinite;
}
.loading-3 i:nth-child(2){ animation: loading03 2s linear -0.4s infinite;
}
.loading-3 i:nth-child(3){ animation: loading03 2s linear -0.8s infinite;
}
.loading-3 i:nth-child(4){ animation: loading03 2s linear -1.2s infinite;
}
.loading-3 i:nth-child(5){ animation: loading03 2s linear -1.6s infinite;
}