1. 首頁 > 生活百科 > >

分享10個純 CSS 實現的 Loading 效果

小知識it知識

我們遇到加載， 要么是UI框架中自帶， 要么就是百度， 然后CV到項目中？但是， 自己實現的時候， 又會沒有思路 。 下面本篇文章就來給大家分享10個純 CSS 實現的 Loading 效果， 希望對大家有所幫助！

分享10個純 CSS 實現的 Loading 效果

文章插圖

在推特上面看到 T. Afif 介紹的十個 Loading 效果 。 如上圖 。
Yeah， 很贊哦， 挺實用的， 遂記錄下來 。
為保證運行正常， 咱先規定下：
* { box-sizing: border-box;}1. 平滑加載
分享10個純 CSS 實現的 Loading 效果

文章插圖

<div class="progress-1"></div>.progress-1 { width:120px; height:20px; background: linear-gradient(#000 0 0) 0/0% no-repeat #ddd; animation:p1 2s infinite linear;}@keyframes p1 { 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 即可 。 【推薦學習：css視頻教程】
    0/0% 是 background-position: 0;/background-size: 0; 的簡寫 。
2. 按步加載
分享10個純 CSS 實現的 Loading 效果

文章插圖

<div class="progress-2"></div>.progress-2 { width:120px; height:20px; border-radius: 20px; background: linear-gradient(orange 0 0) 0/0% no-repeat lightblue; animation:p2 2s infinite steps(10);}@keyframes p2 { 100% {background-size:110%}}
    steps(10) 是 step(10, end) 的簡寫， 指明剛開始沒有， 所以有第2點的處理
    100% {background-size:110%} 添加多一個 step 的百分比， 上面的 step 是 10， 所以是100% + (1/10)*100% = 110%
3. 條紋加載
分享10個純 CSS 實現的 Loading 效果

文章插圖

<div class="progress-3"></div>.progress-3 { width:120px; height:20px; border-radius: 20px; background: repeating-linear-gradient(135deg,#f03355 0 10px,#ffa516 0 20px) 0/0% no-repeat, repeating-linear-gradient(135deg,#ddd 0 10px,#eee 0 20px) 0/100%; animation:p3 2s infinite;}@keyframes p3 { 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. 虛線加載
分享10個純 CSS 實現的 Loading 效果

文章插圖

<div class="progress-4"></div>.progress-4 { width:120px; height:20px; -webkit-mask:linear-gradient(90deg,#000 70%,#0000 0) 0/20%; background: linear-gradient(#000 0 0) 0/0% no-repeat #ddd; animation:p4 2s infinite steps(6);}@keyframes p4 { 100% {background-size:120%}}-webkit-mask 默認有值 repeat， 不然遮罩不會有五個 。
5. 電池加載
分享10個純 CSS 實現的 Loading 效果

文章插圖

<div class="progress-5"></div>.progress-5 { width:80px; height:40px; border:2px solid #000; padding:3px; background: repeating-linear-gradient(90deg,#000 0 10px,#0000 0 16px) 0/0% no-repeat content-box content-box; position: relative; animation:p5 2s infinite steps(6);}.progress-5::before { content:""; position: absolute; top: 50%; left:100%; transform: translateY(-50%); width:10px; height: 10px; border: 2px solid #000;}@keyframes p5 { 100% {background-size:120%}}原作者對 .progress-5::before 偽元素實現如下：
.progress-5::before { content:""; position: absolute; top:-2px; bottom:-2px; left:100%; width:10px; background: linear-gradient( #0000 calc(50% - 7px),#000 0 calc(50% - 5px), #0000 0 calc(50% + 5px),#000 0 calc(50% + 7px),#0000 0) left /100% 100%, linear-gradient(#000 calc(50% - 5px),#0000 0 calc(50% + 5px),#000 0) left /2px 100%, linear-gradient(#0000 calc(50% - 5px),#000 0 calc(50% + 5px),#0000 0) right/2px 100%; background-repeat:no-repeat;}
#0000 是透明， 同等 transparent
6. 內嵌加載這名字起得有些不貼切， 不過不重要， 讀者看圖自然理解 。
分享10個純 CSS 實現的 Loading 效果

文章插圖

<div class="progress-6"></div>.progress-6 { width:120px; height:22px; border-radius: 20px; color: #514b82; border:2px solid; position: relative;}.progress-6::before { content:""; position: absolute; margin:2px; inset:0 100% 0 0; border-radius: inherit; background: #514b82; animation:p6 2s infinite;}@keyframes p6 { 100% {inset:0}}

推薦閱讀