纯 CSS 实现十个还不错的 Loading 效果

在推特上面看到 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%}
}

1. linear-gradient(#000 0 0)
   linear-gradient(#000 0 100%)
   linear-gradient(#000 0 50%, #f00 50% 0)
   linear-gradient(#000 0 0)
   #000
   

2. 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%}
}

1. steps(10) 是 step(10, end) 的简写，指明刚开始没有，所以有 第2点 的处理

2. 100% {background-size:110%}
   step
   step
   10
   100% + (1/10)*100% = 110%
   

3. 条纹加载