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

,在推特上面看到 T. Afif[1] 介绍的十个 Loading 效果。如上图。,Yeah，很赞哦，挺实用的，遂记录下来。,为保证运行正常，咱先规定下：,,
,,
,,
,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 则是进度条加载的条纹。,
,-webkit-mask 默认有值 repeat，不然遮罩不会有五个。,,
,原作者对 .progress-5::before 伪元素实现如下：,#0000 是透明，同等 transparent,这名字起得有些不贴切，不过不重要，读者看图自然理解。,,
,inset:0 100% 0 0; 右边内缩 100%，所以在 keyframes 部分需要将 inset 设置为 0。,,
,遮罩 -webkit-mask 中 radial-gradient 是将宽度四等份，每份以最小 closest-side 的边为直径画圆。,,
,对 linear-gradient 描绘的角度做调整，再加上蒙版。,,
,radial-gradient 画出水平面的波动，就三个圆。var(--r1) 直接调用定义好的属性值。技能 get ...,,
,用 repeating-radial-gradient 方法画出环状的蒙版遮罩。radial-gradient 从底部向上圆形渐变填充。,Uha，看了这么多骚操作，你学废了吗？