#loading {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 10px;
height: 10px;
border-radius: 50%;
box-shadow:
0 -30px 0 0 #bbb,
15px -26px 0 0 #aaa,
26px -15px 0 0 #999,
30px 0 0 0 #888,
26px 15px 0 0 #777,
15px 26px 0 0 #666,
0 30px 0 0 #555,
-15px 26px 0 0 #444,
-26px 15px 0 0 #333,
-30px 0 0 0 #222,
-26px -15px 0 0 #111,
-15px -26px 0 0 #000;
animation: loading 1s infinite steps(12, start);
}
@keyframes loading {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
这个可以不用图片gif,而且可以动态改变颜色,非常完美!应该申请专利!哈哈哈。
用scss结合,不能再完美!
.x-mask-msg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 10px;
height: 10px;
border-radius: 50%;
padding: 4px;
background:none;
box-shadow:
0 -30px 0 0 lighten($base-color,60%),
15px -26px 0 0 lighten($base-color,50%),
26px -15px 0 0 lighten($base-color,40%),
30px 0 0 0 lighten($base-color,30%),
26px 15px 0 0 lighten($base-color,20%),
15px 26px 0 0 lighten($base-color,10%),
0 30px 0 0 $base-color,
-15px 26px 0 0 darken($base-color,3%),
-26px 15px 0 0 darken($base-color,6%),
-30px 0 0 0 darken($base-color,9%),
-26px -15px 0 0 darken($base-color,12%),
-15px -26px 0 0 darken($base-color,15%);
animation: loading 0.2s infinite steps(12, start);
}
@keyframes loading {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
优点是秒杀gif,
1、 节省资源:100k—>1k;
2、可动态改变颜色,可拓展!