利用css的delay延迟以及旋转动画效果实现彩虹条加载动画，纯css没有一行js代码，喜欢的搞起来。

HTML结构：

CSS结构

body {

background-color:#000;

}

.box {

position:relative;

width:100px;

height:50px;

overflow:hidden;

margin:0 auto;

}

.box .wrap {

overflow:hidden;

position:absolute;

margin:0 auto;

left:0;

right:0;

transform-origin:50% bottom;

-webkit-transform-origin:50% bottom;

}

.box .wrap div {

border-radius:50%;

box-sizing:border-box;

margin:0 auto;

}

.box .wrap:first-child div {

width:100px;

height:100px;

border:5px solid red;

animation:loading 1.5s infinite ease-in;

}

.box .wrap:nth-child(2) div {

width:80px;

height:80px;

border:5px solid yellow;

animation:loading 1.5s 100ms infinite ease-in;

}

.box .wrap:nth-child(3) div {

width:60px;

height:60px;

border:5px solid green;

animation:loading 1.5s 200ms infinite ease-in;

}

.box .wrap:nth-child(4) div {

width:40px;

height:40px;

border:5px solid blue;

animation:loading 1.5s 200ms infinite ease-in;

}

.box .wrap:nth-child(5) div {

width:20px;

height:20px;

border:5px solid brown;

animation:loading 1.5s 200ms infinite ease-in;

}

.box .wrap:nth-child(1) {

width:100px;

height:50px;

top:0;

animation:loading 1.5s infinite ease-in;

}

.box .wrap:nth-child(2) {

top:10px;

width:80px;

height:40px;

/* overflow:hidden;

*/

animation:loading 1.5s 100ms infinite ease-in;

}

.box .wrap:nth-child(3) {

top:20px;

width:60px;

height:30px;

/* overflow:hidden;

*/

animation:loading 1.5s 200ms infinite ease-in;

}

.box .wrap:nth-child(4) {

top:30px;

width:40px;

height:20px;

/* overflow:hidden;

*/

animation:loading 1.5s 300ms infinite ease-in;

}

.box .wrap:nth-child(5) {

top:40px;

width:20px;

height:10px;

/* overflow:hidden;

*/

animation:loading 1.5s 400ms infinite ease-in;

}

@keyframes loading {

0% {

transform:rotate(0);

}

100% {

transform:rotate(360deg);

}

}

最终GIF效果展示：