在推特上面看到 T. Afif [1] 介绍的十个 Loading
效果。如上图。
Yeah,很赞哦,挺实用的,遂记录下来。
为保证运行正常,咱先规定下:
* {
box-sizing: border-box;
}
1. 平滑加载
<div class="progress-1"></div>
.progress-1 {
width:120px;
height:20px;
background:
linear-gradient(#000 0 0) 0/0% no-repeat
#ddd;
animation:p1 2s infinite linear;
}
@keyframes p1 {
100% {background-size:100%}
}
-
linear-gradient(#000 0 0) linear-gradient(#000 0 100%) linear-gradient(#000 0 50%, #f00 50% 0) linear-gradient(#000 0 0) #000
-
0/0%
是background-position: 0;/background-size: 0;
的简写。
2. 按步加载
<div class="progress-2"></div>
.progress-2 {
width:120px;
height:20px;
border-radius: 20px;
background:
linear-gradient(orange 0 0) 0/0% no-repeat
lightblue;
animation:p2 2s infinite steps(10);
}
@keyframes p2 {
100% {background-size:110%}
}
-
steps(10)
是step(10, end)
的简写,指明刚开始没有,所以有 第2点 的处理 -
100% {background-size:110%} step step 10 100% + (1/10)*100% = 110%