10 个纯 CSS 加载效果分享

闲来无事，在网上乱逛时，发现了有人分享了 10 个用 CSS 写的 Loading 效果，觉得十分有趣，故记录于此，以后有合适的时机，也可用于自己的项目中。

废话不多说，一起来看看这 10 个有趣的 CSS 加载效果吧。

注：为了保证正常运行，我们先约定元素的 box-sizing 属性统一为 border-box。

1、平滑加载效果

HTML 结构

<div class="progress-1"></div>

CSS 代码

.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、按步加载效果

HTML 结构

<div class="progress-2"></div>

CSS 代码

.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、条纹加载效果

HTML 结构

<div class="progress-3"></div>

CSS 代码

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

HTML 结构

<div class="progress-4"></div>

CSS 代码

.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、带边框进度条效果

HTML 结构

<div class="progress-5"></div>

CSS 代码

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

代码说明

• 上面代码中用到了 inset 属性，它是 top / right / bottom / left 的简写方式
• inset: 0 100% 0 0; 表示右边内缩 100%，所以，在 keyframes 部分需要将 inset 重置为 0。

6、电池加载效果

HTML 结构

<div class="progress-6"></div>

CSS 代码

.progress-6 {
  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-6::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border: 2px solid #000;
}
@keyframes p6 {
    100% { background-size: 120%; }
}

上面关于 .progress-6::before 伪元素较原作者实现方式有所修改，原作者的写法如下：

.progress-6::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 关键字。

7、珠链加载效果

HTML 结构

<div class="progress-7"></div>

CSS 代码

.progress-7 {
  width: 120px;
  height: 24px;
  -webkit-mask:
    radial-gradient(circle closest-side, #000 94%, #0000) 0 0/25% 100%,
    linear-gradient(#000 0 0) center/calc(100% - 12px) calc(100% - 12px) no-repeat;
  background: linear-gradient(#25b09b 0 0) 0/0% no-repeat #ddd;
  animation: p7 2s infinite linear;
}
@keyframes p7 {
    100% { background-size: 100% }
}

代码说明

• 遮罩 -webkit-mask 中 radial-gradient 是将宽度四等份，每份以最小 closest-side 的边为直径画圆。

8、水柱加载效果

HTML 结构

<div class="progress-8"></div>

CSS 代码

.progress-8 {    
  --r1: 154%;
  --r2: 68.5%;
  width: 60px;
  height: 60px;
  border-radius: 50%; 
  background:
    radial-gradient(var(--r1) var(--r2) at top ,#0000 79.5%,#269af2 80%) center left,
    radial-gradient(var(--r1) var(--r2) at bottom,#269af2 79.5%,#0000 80%) center center,
    radial-gradient(var(--r1) var(--r2) at top ,#0000 79.5%,#269af2 80%) center right,
    #ccc;
  background-size: 50.5% 220%;
  background-position: -100% 0%,0% 0%,100% 0%;
  background-repeat: no-repeat;
  animation: p9 2s infinite linear;
}
@keyframes p8 {
    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 径向渐变画出水平面的波动效果，重复 3 次，生成三个圆；同时配合 CSS 自定义变量 var(--r1) 控制半径大小。

9、斑马线加载效果

HTML 结构

<div class="progress-9"></div>

CSS 代码

.progress-9 {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  -webkit-mask: linear-gradient(0deg,#000 55%,#0000 0) bottom/100% 18.18%;
  background: linear-gradient(#f03355 0 0) bottom/100% 0% no-repeat #ddd;
  animation: p8 2s infinite steps(7);
}
@keyframes p9 {
    100% { background-size: 100% 115%; }
}

代码说明

• 主体元素的背景使用了 linear-gradient 线性渐变，同时，配合 CSS 蒙版实现斑马线效果。

10、信号加载效果

HTML 结构

<div class="progress-10"></div>

CSS 代码

.progress-10 {
  width: 120px;
  height: 60px;
  border-radius: 200px 200px 0 0;
  -webkit-mask: repeating-radial-gradient(farthest-side at bottom ,#0000 0,#000 1px 12%,#0000 calc(12% + 1px) 20%);
  background: radial-gradient(farthest-side at bottom,#514b82 0 95%,#0000 0) bottom/0% 0% no-repeat #ddd;
  animation: p10 2s infinite steps(6);
}
@keyframes p10 {
    100% { background-size: 120% 120%; }
}

代码说明

• 用 repeating-radial-gradient 方法画出环状的蒙版遮罩
• 用 radial-gradient 从底部向上圆形渐变填充。

全文完，希望本文提供的 CSS 加载效果能给你提供一些灵感。