Partager 10 effets de chargement implémentés en CSS pur

Lorsque nous rencontrons un chargement, il est soit intégré dans le framework de l'interface utilisateur, soit dans Baidu, puis le CV est ajouté au projet ? Cependant, lorsque vous le mettrez en œuvre vous-même, vous n’en aurez aucune idée. Dans cet article, je vais partager avec vous 10 effets de chargement implémentés en CSS pur. J'espère que cela vous sera utile !

Voir les dix effets de Chargement introduits par T sur Twitter. Comme indiqué ci-dessus. Ouais, c’est génial et très pratique, alors je l’ai enregistré. 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

Pour assurer un fonctionnement normal, nous stipulons d'abord :

rrreee

1. Chargement fluide

rrreeerrreee

• linear-gradient(#000 0 0) Vous pouvez le comprendre comme linear-gradient(#000 0 100%) Si vous ne le connaissez pas encore, copiez <. code>linear-gradient(#000 0 50%, #f00 50% 0), remplacez la pièce d'origine et exécutez-la. Si vous pensez que linear-gradient(#000 0 0) est gênant, écrivez simplement #000. [Apprentissage recommandé : tutoriel vidéo CSS

  ]🎜
• 🎜 0/0% est l'abréviation de background-position : 0;/background-size : 0;. 🎜

2. Chargement étape par étape

🎜🎜rrreeerrree

• 🎜 steps(10) est l'abréviation de step(10, end), indiquant qu'il n'y a pas d'étape au début, il y a donc le traitement du 🎜point 2🎜🎜
• 🎜100% {background-size:110%} ajoute un pourcentage de étape supplémentaire. L'étape ci-dessus est <. code>10, donc Oui 100% + (1/10)*100% = 110%🎜

3. Chargement des bandes

🎜🎜rrreeerrreee🎜 répétition-linéaire-gradient(135deg,#ddd 0 10px,#eee 0 20px) 0/100%; Dessinez des rayures zébrées grises, répétition-linéaire -gradient(135deg,#f03355 0 10px,#ffa516 0 20px) 0/0% no-repeat est la bande du chargement de la barre de progression. 🎜

4. Chargement en pointillés

🎜🎜rrreeerrreee🎜-webkit-mask a la valeur repeat par défaut, sinon le masque ne avoir cinq individus. 🎜

5. Chargement de la batterie

🎜🎜rrreeerrreee🎜L'auteur original a implémenté le pseudo-élément .progress-5::before comme suit : 🎜rrreee🎜🎜# 0000 est transparent, tout aussi transparent🎜

6. Chargement en ligne

🎜Ce nom est un peu inapproprié, mais il n'est pas important que les lecteurs puissent le comprendre naturellement. en regardant la photo. 🎜🎜🎜rrreeerrreee🎜 inset:0 100% 0 0; Le côté droit est en retrait 100%, vous devez donc définir inset dans les images clés est <code>0. 🎜

7. Chargement de la chaîne de perles

🎜🎜rrreeerrreee🎜Le masque -webkit-mask dans radial-gradient consiste à diviser la largeur par quatre Pour chaque portion, tracez un cercle avec le plus petit côté le plus proche comme diamètre. 🎜

8. Chargement du passage piéton

🎜🎜rrreeerrreee🎜Ajustez l'angle représenté par linear-gradient et ajoutez un masque. 🎜

9. Chargement de la colonne d'eau

🎜🎜rrreeerrreee🎜radial-gradient Dessinez les fluctuations dans le plan horizontal, juste trois cercles. var(--r1) appelle directement la valeur d'attribut définie. Compétences obtenir ...🎜

10. Chargement du signal

🎜🎜rrreeerrreee🎜Utilisez la méthode repeating-radial-gradient pour dessiner un ring Le masque masque. radial-gradient se remplit avec un dégradé circulaire de bas en haut. 🎜🎜Uha, après avoir vu tant d'opérations coquines, tu es épuisé ? 🎜🎜🎜Adresse originale : https://twitter.com/ChallengesCss/status/1500437014616940546?cxt=HHwWhIC5gfzgz9IpAAAA🎜

(Partage de vidéos d'apprentissage : front-end web)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!