공유 10 순수 CSS를 사용하여 구현된 로딩 효과

로딩이 발생하면 UI 프레임워크에 내장되어 있거나 Baidu에 내장되어 있고 프로젝트에 CV가 추가되나요? 그러나 직접 구현해 보면 전혀 알 수 없습니다. 이 기사에서는 순수 CSS로 구현된 10가지 로딩 효과를 공유하겠습니다. 도움이 되길 바랍니다.

Afif가 Twitter에서 소개한 10가지 로드 효과를 확인하세요. 위에 표시된 것처럼. 네, 훌륭하고 실용적이어서 녹음해봤습니다. 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 即可。【推荐学习：css视频教程】

• 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) 的简写，指明刚开始没有，所以有第2点的处理

• 100% {background-size:110%} 添加多一个 step 的百分比，上面的 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}
}

inset:0 100% 0 0; 右边内缩 100%，所以在 keyframes 部分需要将 inset 设置为 0。

7. 珠链加载

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

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

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

.progress-8 {
  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 p8 {
    100% {background-size:100% 115%}
}

对 linear-gradient 描绘的角度做调整，再加上蒙版。

9. 水柱加载

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

.progress-9 {    
  --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 p9 {
    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. 信号加载

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

.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

정상적인 작동을 보장하기 위해 먼저 다음 사항을 규정합니다.

rrreee

1. 원활한 로딩

rrreeerrreee

• 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%는 배경 위치: 0;/배경 크기: 0;의 약어입니다. 🎜

2. 단계별 로딩

🎜🎜rrreeerrree

• 🎜 steps(10)는 step(10, end)의 약어로 처음에는 단계가 없어 🎜point 2🎜🎜의 처리가 있음을 나타냅니다.
• 🎜100% {ground-size:110%}는 단계 비율을 하나 더 추가합니다. 위의 단계는 10이므로 예 100% + (1/10)*100% = 110%🎜

3. 스트라이프 로딩

🎜🎜rrreeerrreee🎜 repeating-linear-gradient(135deg,#ddd 0 10px,#eee 0 20px) 0/100%; 회색 얼룩말 줄무늬를 그립니다. 반복 선형 -gradient(135deg,#f03355 0 10px,#ffa516 0 20px) 0/0% no-repeat는 진행률 표시줄 로딩의 스트라이프입니다. 🎜

4. 대시 로드

🎜🎜rrreeerrreee🎜-webkit-mask에는 기본적으로 repeat 값이 있습니다. 그렇지 않으면 마스크가 작동하지 않습니다. 개인이 5명 있어요. 🎜

5. 배터리 로딩

🎜🎜rrreeerrreee🎜원저자는 .progress-5::before 의사 요소를 다음과 같이 구현했습니다. 🎜rrreee🎜🎜# 0000은 투명합니다. 똑같이 투명합니다🎜

6. 인라인 로딩

🎜이 이름은 약간 부적절하지만 독자가 자연스럽게 이해할 수 있는 것은 아닙니다. 사진을 보면서. 🎜🎜🎜rrreeerrreee🎜 inset:0 100% 0 0; 오른쪽은 100% 들여쓰기되어 있으므로 키프레임inset을 설정해야 합니다. /code> 섹션은 0입니다. 🎜

7. 비드 체인 로딩

🎜🎜rrreeerrreee🎜 radial-gradient의 마스크 -webkit-mask는 너비를 다음과 같이 나누는 것입니다. four 각 부분에 대해 가장 작은 가장 가까운 쪽 변을 지름으로 하여 원을 그립니다. 🎜

8. 얼룩말 횡단 로딩

🎜🎜rrreeerrreee🎜 linear-gradient로 표시된 각도를 조정하고 마스크를 추가하세요. 🎜

9. 물기둥 로딩

🎜🎜rrreeerrreee🎜radial-gradient 수평면에 원 3개만 요동을 그립니다. var(--r1)은 정의된 속성 값을 직접 호출합니다. 스킬 get ...🎜

10. 신호 로딩

🎜🎜rrreeerrreee🎜 repeating-radial-gradient 메소드를 사용하여 링 마스크 마스크입니다. 방사형 그라데이션은 아래에서 위쪽으로 원형 그라데이션으로 채워집니다. 🎜🎜우하, 멋진 작전들을 많이 보고 지치셨나요? 🎜🎜🎜원본 주소: https://twitter.com/ChallengesCss/status/1500437014616940546?cxt=HHwWhIC5gfzgz9IpAAAA🎜

(학습 영상 공유: 웹 프론트엔드)

위 내용은 공유 10 순수 CSS를 사용하여 구현된 로딩 효과의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!