简单旋转圆圈加载动画通过HTML的div容器和CSS3的animation与border属性实现，利用border-top着色和持续旋转形成加载效果；2. 脉冲波纹动画使用scale缩放和opacity透明度变化模拟水波扩散，适合按钮点击后的轻量提示；3. 多点跳动动画由三个span元素组成，通过设置不同animation-delay实现错位弹跳，呈现经典省略号动态效果；4. 实际应用中应默认隐藏动画，通过JavaScript控制显隐，结合定位属性居中显示，并适配移动端尺寸与主题色。
网页加载动画能提升用户体验，让用户在等待内容加载时不会感觉页面卡顿或出错。使用HTML5和CSS3可以轻松创建流畅、无需JavaScript的加载动画。下面是一个实用的加载动画案例，适合大多数现代网页项目。
1. 简单旋转圆圈加载动画
这是一个常见的加载指示器，用一个不断旋转的圆圈表示加载中状态。
【HTML结构】只需要一个容器元素来承载动画：
立即学习“前端免费学习笔记（深入）”；
【CSS样式与动画】使用CSS3的animation和border属性制作旋转效果：
.loader {
width: 40px;
height: 40px;
border: 4px solid #f3f3f3;
border-top: 4px solid #3498db;
border-radius: 50%;
animation: spin 1s linear infinite;
margin: 100px auto;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
说明：通过只给顶部边框上色，配合持续旋转动画，形成“加载中”的视觉效果。颜色可自定义，尺寸也可调整适应不同布局。
2. 脉冲波纹加载动画
模仿水滴落入水面的效果，适用于轻量级提示场景。
【CSS】
.ripple-loader {
width: 30px;
height: 30px;
background-color: #e74c3c;
border-radius: 50%;
opacity: 0.6;
animation: ripple 1.4s infinite ease-in;
margin: 100px auto;
}
@keyframes ripple {
0% {
transform: scale(0);
}
50% {
opacity: 0.6;
}
100% {
transform: scale(2);
opacity: 0;
}
}
说明：利用缩放（scale）和透明度变化模拟波纹扩散，适合做小型加载提示，比如按钮点击后等待响应。
3. 多点跳动动画（经典省略号效果）
三个小球依次上下跳动，常用于文字后方作为“正在处理”提示。
【HTML】
.dots-loader span {
display: inline-block;
width: 8px;
height: 8px;
margin: 0 3px;
background-color: #2ecc71;
border-radius: 50%;
animation: bounce 1.4s ease-in-out infinite;
}
.dots-loader span:nth-child(1) {
animation-delay: -0.32s;
}
.dots-loader span:nth-child(2) {
animation-delay: -0.16s;
}
@keyframes bounce {
0%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-10px);
}
}
说明：每个小球设置不同的延迟时间，实现错落有致的弹跳效果，非常贴近用户日常使用的APP加载提示。
4. 实际应用建议
将加载动画嵌入真实页面时，注意以下几点：
- 默认隐藏动画元素，通过JavaScript在加载开始时添加显示类名，完成后移除
- 使用
position: fixed或absolute让动画居中显示，不影响主内容流 - 适配移动端时控制尺寸，避免遮挡主要内容
- 颜色应与网站主题一致，保持视觉统一
基本上就这些。这几个CSS3加载动画简单高效，兼容性良好，适用于登录、数据请求、图片加载等场景，无需额外库即可实现专业体验。
