CSS
GIF 2022-8-31-星期三 15-46-53.gif
在推特上面看到 T. Afif 介绍的十个 Loading 效果。如上图。
Yeah，很赞哦，挺实用的，遂记录下来。
为保证运行正常，咱先规定下：

  1. * {
  2.   box-sizing: border-box;
  3. }

1、平滑加载

1.平滑加载.gif

  1. <div class="progress-1"></div>
  1. .progress-1 {
  2.   width:120px;
  3.   height:20px;
  4.   background:
  5.    linear-gradient(#000 0 0) 0/0% no-repeat
  6.    #ddd;
  7.   animation:p1 2s infinite linear;
  8. }
  9. @keyframes p1 {
  10.     100% {background-size:100%}
  11. }
  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、按步加载

    2.按步加载.gif

    1. <div class="progress-2"></div>
    1. .progress-2 {
    2. width:120px;
    3. height:20px;
    4. border-radius: 20px;
    5. background:
    6. linear-gradient(orange 0 0) 0/0% no-repeat
    7. lightblue;
    8. animation:p2 2s infinite steps(10);
    9. }
    10. @keyframes p2 {
    11.  100% {background-size:110%}
    12. }

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

  4. 100% {background-size:110%} 添加多一个 step 的百分比，上面的 step 是 10，所以是100% + (1/10)*100% = 110%

    3、条纹加载

    3.条纹加载.gif
    1. <div class="progress-3"></div>
    1. .progress-3 {
    2. width:120px;
    3. height:20px;
    4. border-radius: 20px;
    5. background:
    6. repeating-linear-gradient(135deg,#f03355 0 10px,#ffa516 0 20px) 0/0% no-repeat,
    7. repeating-linear-gradient(135deg,#ddd 0 10px,#eee 0 20px) 0/100%;
    8. animation:p3 2s infinite;
    9. }
    10. @keyframes p3 {
    11.  100% {background-size:100%}
    12. }
    repeating-linear-gradient(135deg,#ddd 0 10px,#eee 0 20px) 0/100%; 画出灰色的斑马线条纹，repeating-linear-gradient(135deg,#f03355 0 10px,#ffa516 0 20px) 0/0% no-repeat 则是进度条加载的条纹。

    4、虚线加载

    4.虚线加载.gif
    1. <div class="progress-4"></div>
    1. .progress-4 {
    2. width:120px;
    3. height:20px;
    4. -webkit-mask:linear-gradient(90deg,#000 70%,#0000 0) 0/20%;
    5. background:
    6. linear-gradient(#000 0 0) 0/0% no-repeat
    7. #ddd;
    8. animation:p4 2s infinite steps(6);
    9. }
    10. @keyframes p4 {
    11.  100% {background-size:120%}
    12. }
    -webkit-mask 默认有值 repeat，不然遮罩不会有五个。

    5、电池加载

    5.电池加载.gif
    1. <div class="progress-5"></div>
    1. .progress-5 {
    2. width:80px;
    3. height:40px;
    4. border:2px solid #000;
    5. padding:3px;
    6. background: 
    7.  repeating-linear-gradient(90deg,#000 0 10px,#0000 0 16px) 
    8.  0/0% no-repeat content-box content-box;
    9. position: relative;
    10. animation:p5 2s infinite steps(6);
    11. }
    12. .progress-5::before {
    13. content:"";
    14. position: absolute;
    15. top: 50%;
    16. left:100%;
    17. transform: translateY(-50%);
    18. width:10px;
    19. height: 10px;
    20. border: 2px solid #000;
    21. }
    22. @keyframes p5 {
    23.  100% {background-size:120%}
    24. }
    原作者对 .progress-5::before 伪元素实现如下：
    1. .progress-5::before {
    2. content:"";
    3. position: absolute;
    4. top:-2px;
    5. bottom:-2px;
    6. left:100%;
    7. width:10px;
    8. background:
    9.  linear-gradient(
    10.      #0000   calc(50% - 7px),#000 0 calc(50% - 5px),
    11.      #0000 0 calc(50% + 5px),#000 0 calc(50% + 7px),#0000 0) left /100% 100%,
    12.  linear-gradient(#000 calc(50% - 5px),#0000 0 calc(50% + 5px),#000 0) left /2px 100%,
    13.  linear-gradient(#0000 calc(50% - 5px),#000 0 calc(50% + 5px),#0000        0) right/2px 100%;
    14. background-repeat:no-repeat;
    15. }
    #0000 是透明，同等 transparent

    6、内嵌加载

    这名字起得有些不贴切，不过不重要，看图自然理解。
    6.内嵌加载.gif
    1. <div class="progress-6"></div>
    1. .progress-6 {
    2. width:120px;
    3. height:22px;
    4. border-radius: 20px;
    5. color: #514b82;
    6. border:2px solid;
    7. position: relative;
    8. }
    9. .progress-6::before {
    10. content:"";
    11. position: absolute;
    12. margin:2px;
    13. inset:0 100% 0 0;
    14. border-radius: inherit;
    15. background: #514b82;
    16. animation:p6 2s infinite;
    17. }
    18. @keyframes p6 {
    19.  100% {inset:0}
    20. }
    inset:0 100% 0 0; 右边内缩 100%，所以在 keyframes 部分需要将 inset 设置为 0。

    7、珠链加载

    7.珠链加载.gif
    1. <div class="progress-7"></div>
    1. .progress-7 {
    2. width:120px;
    3. height:24px;
    4. -webkit-mask:
    5.  radial-gradient(circle closest-side,#000 94%,#0000) 0 0/25% 100%,
    6.  linear-gradient(#000 0 0) center/calc(100% - 12px) calc(100% - 12px) no-repeat;
    7. background:
    8. linear-gradient(#25b09b 0 0) 0/0% no-repeat
    9. #ddd;
    10. animation:p7 2s infinite linear;
    11. }
    12. @keyframes p7 {
    13.  100% {background-size:100%}
    14. }
    遮罩 -webkit-mask 中 radial-gradient 是将宽度四等份，每份以最小 closest-side 的边为直径画圆。

    8、斑马线加载

    8.斑马线加载圆.gif
    1. <div class="progress-8"></div>
    1. .progress-8 {
    2. width:60px;
    3. height:60px;
    4. border-radius: 50%;
    5. -webkit-mask:linear-gradient(0deg,#000 55%,#0000 0) bottom/100% 18.18%;
    6. background:
    7. linear-gradient(#f03355 0 0) bottom/100% 0% no-repeat
    8. #ddd;
    9. animation:p8 2s infinite steps(7);
    10. }
    11. @keyframes p8 {
    12.  100% {background-size:100% 115%}
    13. }
    对 linear-gradient 描绘的角度做调整，再加上蒙版。

    9、水柱加载

    9.水柱加载.gif
    1. <div class="progress-9"></div>
    1. .progress-9 {    
    2. --r1: 154%;
    3. --r2: 68.5%;
    4. width:60px;
    5. height:60px;
    6. border-radius: 50%; 
    7. background:
    8.  radial-gradient(var(--r1) var(--r2) at top ,#0000 79.5%,#269af2 80%) center left,
    9.  radial-gradient(var(--r1) var(--r2) at bottom,#269af2 79.5%,#0000 80%) center center,
    10.  radial-gradient(var(--r1) var(--r2) at top ,#0000 79.5%,#269af2 80%) center right,
    11.  #ccc;
    12. background-size: 50.5% 220%;
    13. background-position: -100% 0%,0% 0%,100% 0%;
    14. background-repeat:no-repeat;
    15. animation:p9 2s infinite linear;
    16. }
    17. @keyframes p9 {
    18.  33%  {background-position:    0% 33% ,100% 33% ,200% 33% }
    19.  66%  {background-position: -100%  66%,0%   66% ,100% 66% }
    20.  100% {background-position:    0% 100%,100% 100%,200% 100%}
    21. }
    radial-gradient 画出水平面的波动，就三个圆。var(--r1) 直接调用定义好的属性值。技能 get …

    10、信号加载

    10.信号加载.gif
    1. <div class="progress-10"></div>
    1. .progress-10 {
    2. width:120px;
    3. height:60px;
    4. border-radius:200px 200px 0 0;
    5. -webkit-mask:repeating-radial-gradient(farthest-side at bottom ,#0000 0,#000 1px 12%,#0000 calc(12% + 1px) 20%);
    6. background:
    7. radial-gradient(farthest-side at bottom,#514b82 0 95%,#0000 0) bottom/0% 0% no-repeat
    8. #ddd;
    9. animation:p10 2s infinite steps(6);
    10. }
    11. @keyframes p10 {
    12.  100% {background-size:120% 120%}
    13. }
    用 repeating-radial-gradient 方法画出环状的蒙版遮罩。radial-gradient 从底部向上圆形渐变填充。