使用css动画实现加载进度条和循环loading效果的核心是@keyframes配合transform、width等属性；2. 线性进度条通过width从0%到100%动画实现，循环loading用border颜色差异加rotate旋转动画；3. 优先使用transform和opacity动画以提升性能，避免触发重排重绘；4. 用ease-in-out或cubic-bezier调整动画曲线可使效果更自然；5. 遇卡顿时应检查动画属性、使用开发者工具分析性能并合理使用will-change优化。
使用CSS动画构建加载进度条和实现循环Loading效果，核心在于巧妙运用@keyframes规则配合transform、width或opacity等属性。这不仅能提供直观的用户反馈，还能在不依赖JavaScript的情况下，实现流畅的视觉体验。
解决方案
要用CSS动画实现加载进度条和循环Loading效果，我们可以分别构建两种常见的模式：一种是线性的进度条，另一种是旋转或跳动的加载指示器。
1. 线性加载进度条
立即学习“前端免费学习笔记（深入）”；
这通常是一个从左到右填充的条形。
.progress-container {
width: 80%; /* 容器宽度 */
height: 10px;
background-color: #e0e0e0;
border-radius: 5px;
overflow: hidden; /* 确保进度条在容器内 */
margin: 50px auto; /* 居中显示 */
}
.progress-bar {
width: 0%; /* 初始宽度 */
height: 100%;
background-color: #4CAF50; /* 进度条颜色 */
border-radius: 5px;
animation: fillProgress 3s forwards; /* 动画持续3秒，结束后停留在最后一帧 */
/* animation: fillProgress 3s linear infinite; 如果需要无限循环的“假进度条” */
}
@keyframes fillProgress {
0% {
width: 0%;
}
100% {
width: 100%;
}
}这里，forwards让动画在结束时保持在100%的宽度。如果需要一个无限循环的“假进度条”，可以把forwards改为infinite，并调整animation-timing-function让它看起来更自然。
2. 循环Loading指示器 (例如：旋转的圆圈)
这种更适合表示正在处理，但没有明确进度的场景。
.spinner {
border: 4px solid rgba(0, 0, 0, 0.1);
border-top: 4px solid #3498db; /* 顶部颜色不同，形成旋转感 */
border-radius: 50%;
width: 40px;
height: 40px;
animation: spin 1s linear infinite; /* 1秒完成一圈，无限循环 */
margin: 50px auto;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}这个旋转的加载器非常经典，利用了border和border-top的颜色差异，再通过transform: rotate()实现旋转。
为什么选择CSS动画而非JavaScript？
在许多场景下，我个人更倾向于使用纯CSS动画来构建加载指示器。原因很简单，它通常更高效、更轻量，也更容易维护。浏览器在处理CSS动画时，能够利用硬件加速，这意味着动画的渲染会更流畅，尤其是在移动设备上，这种性能优势尤为明显。
JavaScript固然强大，可以实现更复杂的、与用户交互或数据状态紧密关联的动画。但对于一个简单的加载进度条或一个旋转的Loading图标，CSS足以胜任，而且它将表现层和行为层分离，让代码结构更清晰。试想一下，如果只是一个简单的元素渐变或旋转，用几行CSS就能搞定，为什么还要引入JavaScript的复杂性呢？当然，如果你的进度条需要根据实际数据加载量实时更新，或者需要与复杂的业务逻辑联动，那么JavaScript的介入就是必然的了。但对于纯粹的视觉反馈，CSS是我的首选。
如何让加载进度条看起来更平滑自然？
要让加载动画看起来不那么生硬，甚至带点“呼吸感”，animation-timing-function是关键。默认的ease可能有点普通，但ease-in-out能让动画在开始和结束时都有一个缓冲，显得更加柔和。
更进一步，你可以尝试自定义cubic-bezier()函数。这就像是给动画的速度曲线进行“雕刻”，比如cubic-bezier(0.68, -0.55, 0.27, 1.55)可以创造出一种“弹跳”的效果，让进度条在达到100%时稍微超出一点再回弹，这种小细节能极大地提升用户体验的精致感。
除了时间函数，动画的属性选择也很重要。动画transform属性（如scaleX或translateX）通常比直接动画width或height性能更好，因为transform不会触发浏览器重新计算布局（layout）和绘制（paint），而是直接在合成层（compositor layer）上操作。对于进度条，width是其本质，但如果可以，尽量用transform: scaleX()来替代，例如：
/* 使用transform: scaleX() 实现进度条 */
@keyframes fillProgressScale {
0% {
transform: scaleX(0);
transform-origin: left center; /* 确保从左侧开始缩放 */
}
100% {
transform: scaleX(1);
transform-origin: left center;
}
}
.progress-bar-scale {
/* ...其他样式 */
animation: fillProgressScale 3s forwards;
}此外，在进度条的视觉设计上，添加一个微妙的渐变背景色，或者一个细小的阴影，也能让它在视觉上更具深度和质感，避免单调的纯色。这些都是让动画从“能动”到“好看”的关键。
遇到动画卡顿或性能问题怎么办？
即使是CSS动画，也可能遇到卡顿。这通常发生在动画的属性选择不当，或者浏览器在同一时间需要处理大量渲染任务时。
一个常见的陷阱是动画那些会触发“布局重排”（reflow/layout）或“重绘”（repaint）的CSS属性，比如width、height、margin、padding、top、left（当position是relative或absolute时）。每次这些属性改变，浏览器都可能需要重新计算页面上所有元素的位置和大小，然后重新绘制它们，这非常耗费资源。
解决之道是优先动画那些只触发“合成”（compositing）的属性，主要是transform和opacity。这些属性的动画可以直接在GPU上完成，效率极高。
如果你发现动画不流畅，打开浏览器的开发者工具，切换到“性能”或“渲染”面板，录制一下动画过程。你会看到浏览器在做什么，哪些操作占用了大量时间（比如大量的“Layout”或“Paint”事件），这能帮你定位问题。
有时，will-change属性也能提供帮助。它能提前告诉浏览器，某个元素将要进行动画，从而让浏览器进行一些优化准备。但要注意，will-change并非万能药，过度使用反而可能导致性能下降，因为它会消耗额外的内存。只在确实能带来明显性能提升的场景下使用它。
.progress-bar {
/* ...其他样式 */
will-change: width, transform; /* 提前告知浏览器这些属性将变化 */
}最后，如果动画元素过多，或者动画逻辑过于复杂（比如多个动画同时进行，并且相互影响），考虑简化设计。有时候，少即是多，一个简洁流畅的动画比一个花哨但卡顿的动画更能提升用户体验。
