答案：加载动画通过HTML结构、CSS动画和JavaScript控制实现，如用HTML创建loader元素，CSS定义旋转动画，JavaScript控制显示隐藏。
在HTML中，我们通常不使用“函数”来制作加载动画，而是结合HTML结构、CSS样式与JavaScript逻辑来实现动态效果。所谓的“HTML函数”其实并不存在——HTML是标记语言，负责结构；CSS控制样式和动画；JavaScript处理交互和动态控制。下面介绍如何用这些技术嵌套实现加载动画，并正确嵌入到网页中。
加载动画的基本结构
一个常见的加载动画由一个容器和一个旋转或跳动的元素组成。例如，一个简单的旋转圆圈加载器：
这个结构中，.loader 是实际动画元素，.loader-container 用于居中或控制布局。
CSS实现动画效果
使用CSS @keyframes 定义动画行为，比如让元素持续旋转：
立即学习“前端免费学习笔记（深入）”；
.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); }
}
这段代码创建了一个不断旋转的圆形，模拟加载状态。你也可以用其他方式，如脉冲（pulse）、跳动（bounce）等。
通过JavaScript控制动画显示
虽然动画由CSS驱动，但是否显示通常由JavaScript控制。比如在数据加载时显示动画，完成后隐藏：
function showLoader() {
document.querySelector('.loader-container').style.display = 'flex';
}
function hideLoader() {
document.querySelector('.loader-container').style.display = 'none';
}
// 示例：模拟异步加载
showLoader();
setTimeout(hideLoader, 2000); // 2秒后隐藏
你可以将这类函数绑定到AJAX请求、页面初始化或其他异步操作中。
动画元素的嵌入方法
加载动画可以嵌入在任意需要提示用户等待的位置：
- 页面中心：使用 flex 或 absolute 定位居中显示
- 按钮内部：在提交按钮中替换文字为小加载图标
- 卡片或模块加载区：局部遮罩 + 动画，提升用户体验
关键是确保动画元素结构清晰、样式独立，并能通过类名或ID被JavaScript准确控制。
基本上就这些。不复杂但容易忽略细节，比如动画完成后的清理、移动端适配、无障碍支持（aria-busy）等，也建议关注。
