手写Loading…加载中…样式

在网页开发中，加载动画是提升用户体验的重要元素之一。本文将分享三种不同的Loading…加载中…样式，每种样式都具有独特的视觉效果和动画表现。你可以根据自己的项目需求选择合适的样式，或者将它们作为灵感来创建自己的加载动画。

#1

第一组样式使用了简单的文字动画，通过改变文字的透明度来实现加载效果。

.loader {
   font-weight: bold;
   font-family: sans-serif;
   font-size: 30px;
   animation: l1 1s linear infinite alternate;
}
.loader:before {
   content: "Loading...";
}
@keyframes l1 {
   to {
     opacity: 0;
   }
}

HTML结构：

<div class="loader"></div>

#2

第二组样式通过背景渐变动画来实现加载效果，背景渐变从左到右逐渐展开。

.loader {
   width: fit-content;
   font-weight: bold;
   font-family: sans-serif;
   font-size: 30px;
   padding-bottom: 8px;
   background: linear-gradient(currentColor 0 0) 0 100%/0% 3px no-repeat;
   animation: l2 2s linear infinite;
}
.loader:before {
   content: "Loading...";
}
@keyframes l2 {
   to {
     background-size: 100% 3px;
   }
}

HTML结构：

<div class="loader"></div>

#3

第三组样式使用了重复的线性渐变背景，通过改变背景位置来实现加载效果。

.loader {
   width: fit-content;
   font-weight: bold;
   font-family: sans-serif;
   font-size: 30px;
   padding: 0 5px 8px 0;
   background: repeating-linear-gradient(90deg, currentColor 0 8%, #0000 0 10%) 200% 100%/200% 3px no-repeat;
   animation: l3 2s steps(6) infinite;
}
.loader:before {
   content: "Loading...";
}
@keyframes l3 {
   to {
     background-position: 80% 100%;
   }
}

HTML结构：

<div class="loader"></div>

当然，以下是第四和第五组样式，直接添加到你的博文内容中：

---

#4

第四组样式利用了CSS的clip-path属性来实现文字的逐字显示效果。通过clip-path属性，我们可以控制文字的可见部分，从而创建出逐字显示的动画效果。

.loader {
   width: fit-content;
   font-weight: bold;
   font-family: monospace;
   font-size: 30px;
   clip-path: inset(0 3ch 0 0);
   animation: l4 1s steps(4) infinite;
}
.loader:before {
   content: "Loading...";
}
@keyframes l4 {
   to {
     clip-path: inset(0 -1ch 0 0);
   }
}

HTML结构：

<div class="loader"></div>

#5

第五组样式同样使用了clip-path属性，但这次我们通过改变clip-path的值来实现文字的逐字显示效果。这个动画通过steps函数控制动画的步进，使得文字逐个显示。

.loader {
   width: fit-content;
   font-weight: bold;
   font-family: monospace;
   font-size: 30px;
   clip-path: inset(0 100% 0 0);
   animation: l5 2s steps(11) infinite;
}
.loader:before {
   content: "Loading...";
}
@keyframes l5 {
   to {
     clip-path: inset(0 -1ch 0 0);
   }
}

HTML结构：

<div class="loader"></div>

---

以上就是几种不同的Loading…加载中…样式。每种样式都有其独特的动画效果和实现方式，你可以根据自己的喜好和项目需求进行选择和调整。希望这些样式能够帮助你提升网页的用户体验。如果你有任何问题或建议，欢迎在评论区留言讨论。

24/7/29
链接分享：
https://loading.io/

https://css-loaders.com/