Teilen Sie 10 Ladeeffekte, die mit reinem CSS implementiert wurden

Wenn wir auf das Laden stoßen, ist es entweder im UI-Framework oder in Baidu integriert und wird dann CV zum Projekt hinzugefügt? Wenn Sie es jedoch selbst umsetzen, werden Sie keine Ahnung haben. In diesem Artikel werde ich 10 Ladeeffekte vorstellen, die in reinem CSS implementiert sind. Ich hoffe, dass es Ihnen hilfreich sein wird!

Sehen Sie sich die zehn von T Afif vorgestellten Loading-Effekte an. Wie oben gezeigt. 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

Ja, es ist großartig und sehr praktisch, also habe ich es aufgenommen.

Um einen normalen Betrieb sicherzustellen, legen wir zunächst fest:

rrreee

1. Reibungsloses Laden

rrreeerrreee

• 🎜 linear-gradient(#000 0 0) Sie können es als linear-gradient(#000 0 100%) verstehen. Wenn Sie damit noch nicht vertraut sind, kopieren Sie linear- gradient(#000 0 50%, #f00 50% 0), ersetzen Sie das Originalteil und führen Sie es aus. Wenn Sie das Gefühl haben, dass linear-gradient(#000 0 0) umständlich ist, schreiben Sie einfach #000. [Empfohlenes Lernen: CSS-Video-Tutorial🎜]🎜
• 🎜 0/0% ist die Abkürzung für background-position: 0;/background-size: 0;. 🎜

2. Schritt-für-Schritt-Laden

🎜🎜rrreeerrree

• 🎜 steps(10) ist die Abkürzung von step(10, end) und gibt an, dass es am Anfang keinen Schritt gibt, also die Verarbeitung von 🎜Punkt 2🎜🎜 erfolgt
• 🎜100% {background-size:110%} fügt einen weiteren Schritt-Prozentsatz hinzu. Der obige Schritt ist 10, also Ja 100 % + (1/10)*100 % = 110 %🎜

3. Stripe-Laden

🎜🎜rrreeerrreee🎜 repeating-linear-gradient(135deg,#ddd 0 10px,#eee 0 20px) 0/100%; Graue Zebrastreifen zeichnen, repeating-linear -gradient(135deg,#f03355 0 10px,#ffa516 0 20px) 0/0% no-repeat ist der Streifen des Ladefortschrittsbalkens. 🎜

4. Gepunktete Linie wird geladen

🎜🎜rrreeerrreee🎜-webkit-mask hat standardmäßig den Wert repeat, andernfalls wird die Maske verwendet nicht fünf einzelne. 🎜

5. Batterieladung

🎜🎜rrreeerrreee🎜Der ursprüngliche Autor hat das Pseudoelement .progress-5::before wie folgt implementiert: 🎜rrreee🎜🎜# 0000 ist transparent, ebenso transparent indem man sich das Bild anschaut. 🎜🎜🎜rrreeerrreee🎜 inset:0 100% 0 0; Die rechte Seite ist 100% eingerückt, daher müssen Sie inset in den keyframes ist <code>0. 🎜

7. Laden der Perlenkette

🎜🎜rrreeerrreee🎜Mask -webkit-mask in radial-gradient dient zum Teilen der Breite durch 4 Zeichnen Sie für jeden Teil einen Kreis mit der kleinsten nächsten Seite als Durchmesser. 🎜

8. Zebrastreifen wird geladen

🎜🎜rrreeerrreee🎜Passen Sie den durch linear-gradient dargestellten Winkel an und fügen Sie eine Maske hinzu. 🎜

9. Belastung der Wassersäule

🎜🎜rrreeerrreee🎜radial-gradient Zeichnen Sie die Schwankungen in der horizontalen Ebene, nur drei Kreise. var(--r1) ruft direkt den definierten Attributwert auf. Fähigkeiten get ...🎜

10. Signal laden

🎜🎜rrreeerrreee🎜Verwenden Sie die Methode repeating-radial-gradient, um einen zu zeichnen Ring Die Maske Maske. radial-gradient füllt mit einem kreisförmigen Farbverlauf von unten nach oben. 🎜🎜Uha, bist du nach so vielen frechen Operationen erschöpft? 🎜🎜🎜Ursprüngliche Adresse: https://twitter.com/ChallengesCss/status/1500437014616940546?cxt=HHwWhIC5gfzgz9IpAAAA🎜

(Lernvideo-Sharing: Web-Frontend)

Das obige ist der detaillierte Inhalt vonTeilen Sie 10 Ladeeffekte, die mit reinem CSS implementiert wurden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!