旋转圆圈动画通过border和rotate实现持续转动；2. 脉冲波动画利用scale与opacity变化模拟呼吸效果；3. 横条进度流动画使用伪元素和translateX制造流动感。
实现一个简单的加载动画，常用的方式是利用CSS的@keyframes和animation属性。下面介绍几种常见且实用的简单加载动画实现方法。
1. 旋转圆圈加载动画
这是最基础也最常见的加载效果，适合用于页面或组件加载时的提示。
示例代码：
HTML:
<div class="loader"></div>
CSS:
.loader {
width: 40px;
height: 40px;
border: 4px solid #f3f3f3;
border-top: 4px solid #3498db;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
说明：通过改变border-top的颜色并配合transform: rotate()实现持续旋转效果。
2. 脉冲波（呼吸灯）动画
适用于提示用户“正在加载”，视觉柔和。
立即学习“前端免费学习笔记（深入）”；
CSS:
.loader {
width: 20px;
height: 20px;
background: #3498db;
border-radius: 50%;
animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
0% { transform: scale(0.5); opacity: 0.6; }
50% { transform: scale(1.2); opacity: 1; }
100% { transform: scale(0.5); opacity: 0.6; }
}
说明：使用scale和opacity模拟“呼吸”效果，看起来像在脉动。
3. 横条进度流动画
模仿进度条流动的感觉，适合内容加载场景。
CSS:
.loader {
width: 100px;
height: 10px;
background: #f1f1f1;
border-radius: 5px;
overflow: hidden;
}
.loader::after {
content: '';
display: block;
width: 30%;
height: 100%;
background: #3498db;
animation: slide 1.2s ease-in-out infinite;
}
@keyframes slide {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
说明：通过伪元素和translateX实现从左到右的滑动动画，模拟流动感。
基本上就这些。选择哪种动画取决于你的设计风格和使用场景。关键点是合理使用animation、transform和@keyframes，保持代码简洁高效。
