在推特上面看到T.Afif[1]介绍的十个Loading效果。如上图。
Yeah，很赞哦，挺实用的，遂记录下来。
为保证运行正常，咱先规定下：
*{box-sizing:border-box;}复制代码1.平滑加载1.平滑加载.gif
divclass="progress-1"/div复制代码
.progress-1{width:px;height:20px;background:linear-gradient(#)0/0%no-repeat#ddd;animation:p12sinfinitelinear;}
keyframesp1{%{background-size:%}}复制代码linear-gradient(#)你可以理解为linear-gradient(#0%)，如果还不熟悉，复制linear-gradient(#%,#f%0)，替换原先的部分跑一下。觉得linear-gradient(#)别扭的话，直接写#即可。0/0%是background-position:0;/background-size:0;的简写。2.按步加载2.按步加载.gifdivclass="progress-2"/div复制代码
.progress-2{width:px;height:20px;border-radius:20px;background:linear-gradient(orange00)0/0%no-repeatlightblue;animation:p22sinfinitesteps(10);}
keyframesp2{%{background-size:%}}复制代码steps(10)是step(10,end)的简写，指明刚开始没有，所以有第2点的处理%{background-size:%}添加多一个step的百分比，上面的step是10，所以是%+(1/10)*%=%3.条纹加载3.条纹加载.gifdivclass="progress-3"/div复制代码
.progress-3{width:px;height:20px;border-radius:20px;background:repeating-linear-gradient(deg,#fpx,#ffapx)0/0%no-repeat,repeating-linear-gradient(deg,#dddpx,#eeepx)0/%;animation:p32sinfinite;}
keyframesp3{%{background-size:%}}复制代码repeating-linear-gradient(deg,#dddpx,#eeepx)0/%;画出灰色的斑马线条纹，repeating-linear-gradient(deg,#fpx,#ffapx)0/0%no-repeat则是进度条加载的条纹。
4.虚线加载4.虚线加载.gifdivclass="progress-4"/div复制代码
.progress-4{width:px;height:20px;-webkit-mask:linear-gradient(90deg,#70%,#)0/20%;background:linear-gradient(#)0/0%no-repeat#ddd;animation:p42sinfinitesteps(6);}
keyframesp4{%{background-size:%}}复制代码-webkit-mask默认有值repeat，不然遮罩不会有五个。
5.电池加载5.电池加载.gifdivclass="progress-5"/div复制代码
.progress-5{width:80px;height:40px;border:2pxsolid#;padding:3px;background:repeating-linear-gradient(90deg,#px,#16px)0/0%no-repeatcontent-boxcontent-box;position:relative;animation:p52sinfinitesteps(6);}.progress-5::before{content:"";position:absolute;top:50%;left:%;transform:translateY(-50%);width:10px;height:10px;border:2pxsolid#;}
keyframesp5{%{background-size:%}}复制代码原作者对.progress-5::before伪元素实现如下：
.progress-5::before{content:"";position:absolute;top:-2px;bottom:-2px;left:%;width:10px;background:linear-gradient(#0calc(50%-7px),#0calc(50%-5px),#calc(50%+5px),#0calc(50%+7px),#)left/%%,linear-gradient(#calc(50%-5px),#calc(50%+5px),#0)left/2px%,linear-gradient(#0calc(50%-5px),#0calc(50%+5px),#)right/2px%;background-repeat:no-repeat;}复制代码
#0是透明，同等transparent
6.内嵌加载这名字起得有些不贴切，不过不重要，读者看图自然理解。
6.内嵌加载.gifdivclass="progress-6"/div复制代码
.progress-6{width:px;height:22px;border-radius:20px;color:#b82;border:2pxsolid;position:relative;}.progress-6::before{content:"";position:absolute;margin:2px;inset:0%00;border-radius:inherit;background:#b82;animation:p62sinfinite;}
keyframesp6{%{inset:0}}复制代码inset:0%00;右边内缩%，所以在keyframes部分需要将inset设置为0。
7.珠链加载7.珠链加载.gifdivclass="progress-7"/div复制代码
.progress-7{width:px;height:24px;-webkit-mask:radial-gradient(circleclosest-side,#94%,#0)00/25%%,linear-gradient(#)center/calc(%-12px)calc(%-12px)no-repeat;background:linear-gradient(#25b09b00)0/0%no-repeat#ddd;animation:p72sinfinitelinear;}
keyframesp7{%{background-size:%}}复制代码遮罩-webkit-mask中radial-gradient是将宽度四等份，每份以最小closest-side的边为直径画圆。
8.斑马线加载8.斑马线加载圆.gifdivclass="progress-8"/div复制代码
.progress-8{width:60px;height:60px;border-radius:50%;-webkit-mask:linear-gradient(0deg,#55%,#)bottom/%18.18%;background:linear-gradient(#f)bottom/%0%no-repeat#ddd;animation:p82sinfinitesteps(7);}
keyframesp8{%{background-size:%%}}复制代码对linear-gradient描绘的角度做调整，再加上蒙版。
9.水柱加载9.水柱加载.gifdivclass="progress-9"/div复制代码
.progress-9{--r1:%;--r2:68.5%;width:60px;height:60px;border-radius:50%;background:radial-gradient(var(--r1)var(--r2)attop,#079.5%,#af%)centerleft,radial-gradient(var(--r1)var(--r2)atbottom,#af.5%,#080%)centercenter,radial-gradient(var(--r1)var(--r2)attop,#079.5%,#af%)centerright,#ccc;background-size:50.5%%;background-position:-%0%,0%0%,%0%;background-repeat:no-repeat;animation:p92sinfinitelinear;}
keyframesp9{33%{background-position:0%33%,%33%,%33%}66%{background-position:-%66%,0%66%,%66%}%{background-position:0%%,%%,%%}}复制代码radial-gradient画出水平面的波动，就三个圆。var(--r1)直接调用定义好的属性值。技能get...
10.信号加载10.信号加载.gifdivclass="progress-10"/div复制代码
.progress-10{width:px;height:60px;border-radius:pxpx00;-webkit-mask:repeating-radial-gradient(farthest-sideatbottom,#,#1px12%,#0calc(12%+1px)20%);background:radial-gradient(farthest-sideatbottom,#b%,#)bottom/0%0%no-repeat#ddd;animation:psinfinitesteps(6);}
keyframesp10{%{background-size:%%}}复制代码用repeating-radial-gradient方法画出环状的蒙版遮罩。radial-gradient从底部向上圆形渐变填充。
Uha，看了这么多骚操作，你学废了吗？
参考和后话原文：10CSS-onlyloadersreadytouse\![2]作者：Jimmy