制作css加载进度条动画的核心是利用@keyframes定义样式变化，并通过animation属性应用；要让动画更平滑，1. 使用ease-in-out或自定义cubic-bezier时间函数优化速度曲线，2. 优先使用transform（如translatex或scalex）替代width变化以提升性能，3. 设置animation-fill-mode: forwards确保动画结束状态停留；对于不确定性加载动画，可1. 利用background-image配合background-position动画实现流动渐变效果，2. 使用伪元素结合transform和opacity创建光斑扫过动画；控制加载状态需结合javascript，1. 通过添加或移除类名控制不同状态（如is-loading、is-complete），2. 使用animation-play-state: paused/running实现动画暂停与恢复，3. 用opacity过渡替代display切换以实现淡入淡出效果，从而提升用户体验，最终达到缓解等待焦虑的目的。
CSS制作加载进度条动画，核心在于利用
@keyframes规则，它允许我们定义元素在不同时间点上的样式状态，从而创造出平滑或有节奏的视觉变化。这不仅仅是宽度或位置的简单过渡，更是一种对用户等待心理的巧妙安抚，让用户知道“系统还在努力，请稍候”。它本质上是给一个元素（通常是代表进度的内条）设定一个动画轨迹，从初始状态过渡到最终状态，或者循环往复。
如何让进度条动画更平滑、更自然？
让进度条动画看起来更“活”一点，这其实是个美学与技术结合的问题。我个人在实践中发现，关键在于动画的时间函数（
animation-timing-function）和动画属性的选择。
首先，
animation-timing-function的选择至关重要。默认的
ease虽然不差，但如果你想模拟更真实的加载过程，比如开始快、中间慢、最后又快起来的“加速减速”感，
ease-in-out会是个不错的选择。它让动画在开始和结束时都有一个平滑的过渡，避免了生硬的跳跃。更高级一点，你可以自定义
cubic-bezier曲线，精确控制动画的速度曲线。比如，
cubic-bezier(0.68, -0.55, 0.27, 1.55)能做出一种“弹性”效果，进度条会稍微超出终点再弹回来，虽然不一定适合所有场景，但很有趣。
立即学习“前端免费学习笔记（深入）”；
其次，动画属性的选择也影响很大。我通常建议优先使用
transform属性来制作动画，比如
transform: translateX()或
scaleX()，而不是直接改变
width。这是因为
transform通常能触发GPU加速，动画会更加流畅，尤其是在移动设备上，这种差异会更明显。改变
width可能会导致浏览器重新计算布局，从而引起“卡顿”或“掉帧”现象。
还有个小细节，就是
animation-fill-mode: forwards;。这个属性确保动画结束后，元素会停留在动画的最后一帧状态，而不是跳回初始状态。这对于确定性进度条（比如从0%到100%）来说非常重要，你总不希望进度条跑完了又突然消失吧。
制作不确定性加载动画（Indeterminate Progress Bar）有哪些技巧？
不确定性加载动画，或者说“骨架屏”那种效果，是当你不清楚具体加载进度时非常实用的方案。它更多是给用户一个“系统正在忙碌”的视觉反馈，而不是具体的百分比。这里有几种我常用的方法：
一种常见的做法是利用
background-image和
background-position的组合。你可以创建一个渐变背景，比如
linear-gradient，然后通过
@keyframes动画来改变这个背景的
background-position。这样，渐变条纹就会像流水一样在进度条上移动，形成一种“流动”的感觉。
.indeterminate-progress {
width: 100%;
height: 8px;
background-color: #e0e0e0;
border-radius: 4px;
overflow: hidden;
position: relative;
}
.indeterminate-progress::before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: linear-gradient(to right, transparent 0%, #4CAF50 50%, transparent 100%);
background-size: 200% 100%; /* 确保渐变条纹足够长 */
animation: indeterminateMove 1.5s linear infinite;
}
@keyframes indeterminateMove {
0% {
background-position: -100% 0; /* 从左边完全移出 */
}
100% {
background-position: 100% 0; /* 移到右边完全移出 */
}
}另一种方法是利用伪元素（
::before或
::after）配合
transform。你可以创建一个比容器窄的伪元素，给它一个颜色，然后让它从左到右，或者从右到左地来回移动。结合
opacity的变化，可以模拟出那种“光斑”扫过的效果。我有时候会给它加一点
box-shadow，让光斑看起来更立体。
如何在不同加载状态下控制进度条的显示与暂停？
控制进度条的显示和状态，这通常需要JavaScript的介入，但CSS本身也提供了一些很方便的属性来配合。
最直接的方式是利用CSS类（class）来控制。当加载开始时，通过JavaScript给进度条元素添加一个特定的类（比如
is-loading），这个类里面定义了动画的样式。加载完成后，移除这个类，或者添加另一个类（比如
is-complete）来改变它的状态，比如让它消失或者变成一个完成的图标。
// 假设你有一个进度条元素
const progressBar = document.querySelector('.progress-bar');
// 加载开始时
function startLoading() {
progressBar.style.width = '0%'; // 重置进度
progressBar.classList.add('is-loading');
progressBar.classList.remove('is-complete');
}
// 加载进行中（如果是确定性进度条）
function updateProgress(percentage) {
progressBar.style.width = `${percentage}%`;
}
// 加载完成时
function finishLoading() {
progressBar.style.width = '100%'; // 确保最终是100%
progressBar.classList.remove('is-loading');
progressBar.classList.add('is-complete');
// 动画结束后可以隐藏
setTimeout(() => {
// progressBar.style.display = 'none'; // 或者通过opacity逐渐隐藏
}, 500); // 等待动画完成
}
// 暂停动画
// CSS: animation-play-state: paused;
function pauseAnimation() {
progressBar.style.animationPlayState = 'paused';
}
// 继续动画
// CSS: animation-play-state: running;
function resumeAnimation() {
progressBar.style.animationPlayState = 'running';
}在CSS中，
animation-play-state属性非常有用，它可以设置为
running或
paused。这意味着你可以在不改变其他动画属性的情况下，通过JavaScript动态地暂停或恢复动画。这对于需要用户交互或特定事件触发的动画控制非常方便。
至于显示与隐藏，除了直接改变
display属性，我更倾向于使用
opacity配合
transition。这样进度条的出现和消失会有一个渐变效果，看起来更柔和，用户体验也更好。比如，加载开始时将
opacity从0过渡到1，加载完成时再从1过渡到0。
总的来说，CSS动画在进度条上的应用，是前端体验优化里一个不容忽视的细节。它能有效缓解用户的等待焦虑，哪怕只是一个简单的视觉反馈，也能让用户感觉流程更顺畅。
