制作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动画在进度条上的应用，是前端体验优化里一个不容忽视的细节。它能有效缓解用户的等待焦虑，哪怕只是一个简单的视觉反馈，也能让用户感觉流程更顺畅。
评论（已关闭）
评论已关闭