纯CSS实现十个非常Nice的Loading效果

　　在推特上面看到个blog，介绍的十个Loading效果。如上图。
　　Yeah，很赞哦，挺实用的，遂记录下来。
　　为保证运行正常，咱先规定下：｛boxsizing：｝1、平滑加载
　　。progress1｛width：120height：20background：lineargradient（00000）00animation：p12｝keyframesp1｛100｛backgroundsize：100｝｝lineargradient（00000）你可以理解为lineargradient（0000100），如果还不熟悉，复制lineargradient（000050，f00500），替换原先的部分跑一下。觉得lineargradient（00000）别扭的话，直接写000即可。00是backgroundposition：0；backgroundsize：0；的简写。2、按步加载
　　。progress2｛width：120height：20borderradius：20background：lineargradient（orange00）00animation：p22sinfinitesteps（10）；｝keyframesp2｛100｛backgroundsize：110｝｝steps（10）是step（10，end）的简写，指明刚开始没有，所以有第2点的处理100｛backgroundsize：110｝添加多一个step的百分比，上面的step是10，所以是100（110）1001103、条纹加载
　　。progress3｛width：120height：20borderradius：20background：repeatinglineargradient（135deg，f03355010px，ffa516020px）00norepeat，repeatinglineargradient（135deg，ddd010px，eee020px）0100；animation：p32｝keyframesp3｛100｛backgroundsize：100｝｝
　　repeatinglineargradient（135deg，ddd010px，eee020px）0100；画出灰色的斑马线条纹，repeatinglineargradient（135deg，f03355010px，ffa516020px）00norepeat则是进度条加载的条纹。4、虚线加载
　　。progress4｛width：120height：20webkitmask：lineargradient（90deg，00070，00000）020；background：lineargradient（00000）00animation：p42sinfinitesteps（6）；｝keyframesp4｛100｛backgroundsize：120｝｝
　　webkitmask默认有值repeat，不然遮罩不会有五个。5、电池加载
　　。progress5｛width：80height：40border：2pxsolid000；padding：3background：repeatinglineargradient（90deg，000010px，0000016px）00position：animation：p52sinfinitesteps（6）；｝。progress5：：before｛content：；position：top：50；left：100；transform：translateY（50）；width：10height：10border：2pxsolid000；｝keyframesp5｛100｛backgroundsize：120｝｝
　　原作者对。progress5：：before伪元素实现如下：。progress5：：before｛content：；position：top：2bottom：2left：100；width：10background：lineargradient（0000calc（507px），0000calc（505px），00000calc（505px），0000calc（507px），00000）left100100，lineargradient（000calc（505px），00000calc（505px），0000）left2px100，lineargradient（0000calc（505px），0000calc（505px），00000）right2px100；backgroundrepeat：｝
　　0000是透明，同等transparent6、内嵌加载
　　这名字起得有些不贴切，不过不重要，读者看图自然理解。
　　。progress6｛width：120height：22borderradius：20color：514b82；border：2position：｝。progress6：：before｛content：；position：margin：2inset：010000；borderradius：background：514b82；animation：p62｝keyframesp6｛100｛inset：0｝｝
　　inset：010000；右边内缩100，所以在keyframes部分需要将inset设置为0。7、珠链加载
　　。progress7｛width：120height：24webkitmask：radialgradient（circleclosestside，00094，0000）0025100，lineargradient（00000）centercalc（10012px）calc（10012px）background：lineargradient（25b09b00）00animation：p72｝keyframesp7｛100｛backgroundsize：100｝｝
　　遮罩webkitmask中radialgradient是将宽度四等份，每份以最小closestside的边为直径画圆。8、斑马线加载
　　。progress8｛width：60height：60borderradius：50；webkitmask：lineargradient（0deg，00055，00000）bottom10018。18；background：lineargradient（f0335500）bottom1000animation：p82sinfinitesteps（7）；｝keyframesp8｛100｛backgroundsize：100115｝｝
　　对lineargradient描绘的角度做调整，再加上蒙版。9、水柱加载
　　。progress9｛r1：154；r2：68。5；width：60height：60borderradius：50；background：radialgradient（var（r1）var（r2）attop，000079。5，269af280）centerleft，radialgradient（var（r1）var（r2）atbottom，269af279。5，000080）centercenter，radialgradient（var（r1）var（r2）attop，000079。5，269af280）centerright，backgroundsize：50。5220；backgroundposition：1000，00，1000；backgroundrepeat：animation：p92｝keyframesp9｛33｛backgroundposition：033，10033，20033｝66｛backgroundposition：10066，066，10066｝100｛backgroundposition：0100，100100，200100｝｝
　　radialgradient画出水平面的波动，就三个圆。var（r1）直接调用定义好的属性值。技能get。。。10、信号加载
　　。progress10｛width：120height：60borderradius：200px200px00；webkitmask：repeatingradialgradient（farthestsideatbottom，00000，0001px12，0000calc（121px）20）；background：radialgradient（farthestsideatbottom，514b82095，00000）bottom00animation：p102sinfinitesteps（6）；｝keyframesp10｛100｛backgroundsize：120120｝｝
　　用repeatingradialgradient方法画出环状的蒙版遮罩。radialgradient从底部向上圆形渐变填充。
　　Uha，看了这么多骚操作，你学废了吗？参考和后话原文：10CSSonlyloadersreadytouse！〔2〕参考资料
　　〔1〕
　　T。Afif：https：twitter。comChallengesCss
　　〔2〕
　　10CSSonlyloadersreadytouse！：https：twitter。comChallengesCssstatus1500437014616940546？cxtHHwWhIC5gfzgz9IpAAAA
　　头条创作挑战赛