分享10个纯 CSS 实现的 Loading 效果 _生活百科

我们遇到加载，要么是UI框架中自带，要么就是百度，然后CV到项目中？但是，自己实现的时候，又会没有思路。下面本篇文章就来给大家分享10个纯 CSS 实现的 Loading 效果，希望对大家有所帮助！

文章插图

在推特上面看到 T. Afif 介绍的十个 Loading 效果。如上图。
Yeah，很赞哦，挺实用的，遂记录下来。
为保证运行正常，咱先规定下：
* { box-sizing: border-box;}1. 平滑加载

文章插图

<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

0/0%

background-position: 0;/background-size: 0;

2. 按步加载

文章插图

<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)

100% {background-size:110%}

step

10

100% + (1/10)*100% = 110%

3. 条纹加载

文章插图

<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. 虚线加载

文章插图

<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. 电池加载

文章插图

<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. 内嵌加载这名字起得有些不贴切，不过不重要，读者看图自然理解。

文章插图

<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}}