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

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