前端Q - 純 CSS 實現十個還不錯的 Loading 效果－鑽石舞台

前端Q

我是winty，專注分享前端知識和各類前端資源，樂於分享各種有趣的事，關注我，一起做個有趣的人～

公眾號

點擊上方前端Q，關注公眾號

回復加群，加入前端Q技術交流群

在推特上面看到 T. Afif[1] 介紹的十個 Loading 效果。如上圖。

Yeah，很贊哦，挺實用的，遂記錄下來。

為保證運行正常，咱先規定下：

*{box-sizing:border-box;}1. 平滑加載

<divclass="progress-1"></div>.progress-1{width:120px;height:20px;background:linear-gradient(#00000)0/0%no-repeat#ddd;animation:p12sinfinitelinear;}@keyframesp1{100%{background-size:100%}}

linear-gradient(#000 0 0) 你可以理解為 linear-gradient(#000 0 100%)，如果還不熟悉，複製 linear-gradient(#000 0 50%, #f00 50% 0) ，替換原先的部分跑一下。覺得 linear-gradient(#000 0 0) 彆扭的話，直接寫 #000 即可。

0/0% 是 background-position: 0;/background-size: 0; 的簡寫。

2. 按步加載

<divclass="progress-2"></div>.progress-2{width:120px;height:20px;border-radius:20px;background:linear-gradient(orange00)0/0%no-repeatlightblue;animation:p22sinfinitesteps(10);}@keyframesp2{100%{background-size:110%}}

steps(10) 是 step(10, end) 的簡寫，指明剛開始沒有，所以有第2點的處理

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

3. 條紋加載

<divclass="progress-3"></div>.progress-3{width:120px;height:20px;border-radius:20px;background:repeating-linear-gradient(135deg,#f03355010px,#ffa516020px)0/0%no-repeat,repeating-linear-gradient(135deg,#ddd010px,#eee020px)0/100%;animation:p32sinfinite;}@keyframesp3{100%{background-size:100%}}

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. 虛線加載

<divclass="progress-4"></div>.progress-4{width:120px;height:20px;-webkit-mask:linear-gradient(90deg,#00070%,#00000)0/20%;background:linear-gradient(#00000)0/0%no-repeat#ddd;animation:p42sinfinitesteps(6);}@keyframesp4{100%{background-size:120%}}

-webkit-mask 默認有值 repeat，不然遮罩不會有五個。

5. 電池加載

<divclass="progress-5"></div>.progress-5{width:80px;height:40px;border:2pxsolid#000;padding:3px;background:repeating-linear-gradient(90deg,#000010px,#0000016px)0/0%no-repeatcontent-boxcontent-box;position:relative;animation:p52sinfinitesteps(6);}.progress-5::before{content:"";position:absolute;top:50%;left:100%;transform:translateY(-50%);width:10px;height:10px;border:2pxsolid#000;}@keyframesp5{100%{background-size:120%}}

原作者對 .progress-5::before 偽元素實現如下：

.progress-5::before{content:"";position:absolute;top:-2px;bottom:-2px;left:100%;width:10px;background:linear-gradient(#0000calc(50%-7px),#0000calc(50%-5px),#00000calc(50%+5px),#0000calc(50%+7px),#00000)left/100%100%,linear-gradient(#000calc(50%-5px),#00000calc(50%+5px),#0000)left/2px100%,linear-gradient(#0000calc(50%-5px),#0000calc(50%+5px),#00000)right/2px100%;background-repeat:no-repeat;}

#0000 是透明，同等 transparent

6. 內嵌加載

這名字起得有些不貼切，不過不重要，讀者看圖自然理解。

<divclass="progress-6"></div>.progress-6{width:120px;height:22px;border-radius:20px;color:#514b82;border:2pxsolid;position:relative;}.progress-6::before{content:"";position:absolute;margin:2px;inset:0100%00;border-radius:inherit;background:#514b82;animation:p62sinfinite;}@keyframesp6{100%{inset:0}}

inset:0 100% 0 0; 右邊內縮 100%，所以在 keyframes 部分需要將 inset 設置為 0。

7. 珠鏈加載

<divclass="progress-7"></div>.progress-7{width:120px;height:24px;-webkit-mask:radial-gradient(circleclosest-side,#00094%,#0000)00/25%100%,linear-gradient(#00000)center/calc(100%-12px)calc(100%-12px)no-repeat;background:linear-gradient(#25b09b00)0/0%no-repeat#ddd;animation:p72sinfinitelinear;}@keyframesp7{100%{background-size:100%}}

遮罩 -webkit-mask 中 radial-gradient 是將寬度四等份，每份以最小 closest-side 的邊為直徑畫圓。

8. 斑馬線加載

<divclass="progress-8"></div>.progress-8{width:60px;height:60px;border-radius:50%;-webkit-mask:linear-gradient(0deg,#00055%,#00000)bottom/100%18.18%;background:linear-gradient(#f0335500)bottom/100%0%no-repeat#ddd;animation:p82sinfinitesteps(7);}@keyframesp8{100%{background-size:100%115%}}

對 linear-gradient 描繪的角度做調整，再加上蒙版。

9. 水柱加載

<divclass="progress-9"></div>.progress-9{--r1:154%;--r2:68.5%;width:60px;height:60px;border-radius:50%;background:radial-gradient(var(--r1)var(--r2)attop,#000079.5%,#269af280%)centerleft,radial-gradient(var(--r1)var(--r2)atbottom,#269af279.5%,#000080%)centercenter,radial-gradient(var(--r1)var(--r2)attop,#000079.5%,#269af280%)centerright,#ccc;background-size:50.5%220%;background-position:-100%0%,0%0%,100%0%;background-repeat:no-repeat;animation:p92sinfinitelinear;}@keyframesp9{33%{background-position:0%33%,100%33%,200%33%}66%{background-position:-100%66%,0%66%,100%66%}100%{background-position:0%100%,100%100%,200%100%}}

radial-gradient 畫出水平面的波動，就三個圓。var(--r1) 直接調用定義好的屬性值。技能 get ...

10. 信號加載

<divclass="progress-10"></div>.progress-10{width:120px;height:60px;border-radius:200px200px00;-webkit-mask:repeating-radial-gradient(farthest-sideatbottom,#00000,#0001px12%,#0000calc(12%+1px)20%);background:radial-gradient(farthest-sideatbottom,#514b82095%,#00000)bottom/0%0%no-repeat#ddd;animation:p102sinfinitesteps(6);}@keyframesp10{100%{background-size:120%120%}}

用 repeating-radial-gradient 方法畫出環狀的蒙版遮罩。radial-gradient 從底部向上圓形漸變填充。

Uha，看了這麼多騷操作，你學廢了嗎？

參考和後話

原文：10 CSS-only loaders ready to use![2]

參考資料

[1]

T. Afif:https://twitter.com/ChallengesCss

[2]

10 CSS-only loaders ready to use!:https://twitter.com/ChallengesCss/status/1500437014616940546?cxt=HHwWhIC5gfzgz9IpAAAA

作者：Jimmy

https://juejin.cn/post/7080542771387301896

聲明：文章著作權歸作者所有，如有侵權，請聯繫小編刪除。