不确定进度条通过循环动画传达系统正在处理，适用于无法预估完成时间的场景，如网络请求；而确定性进度条显示具体百分比，需明确任务总量与进度。选择取决于是否能可靠估算时间：不可预测时用不确定进度条，避免误导用户。纯CSS可通过@keyframes实现线性滑动或旋转加载器，如利用transform: translateX()创建移动条，或transform: rotate()实现旋转spinner，配合无限循环动画提升用户体验。常见样式包括线性条、旋转圈、跳动点和骨架屏，各适配不同UI需求。
不确定进度条的实现核心在于通过动画效果，持续地向用户传达“系统正在处理中，请稍候”的信息，而无需告知具体的完成百分比。它通常用于那些我们无法准确预估完成时间的操作，比如网络请求、复杂的后台计算或文件上传到未知大小的服务器。
一个常见的实现思路是利用CSS的
animation
属性配合
@keyframes
来创建循环的视觉效果，例如一个不断移动的条块、一个旋转的加载图标，或者几个跳动的小圆点。关键在于动画的无限循环和流畅性，让用户感受到进程的活跃。
不确定进度条与确定性进度条有何区别，以及何时选择它们？
在我看来，这两种进度条虽然都旨在提升用户体验，但它们背后的设计哲学和适用场景是截然不同的。确定性进度条，顾名思义，它能明确显示任务的完成百分比，比如“下载进度：50%”。这种进度条要求我们能准确地知道任务的总量和当前已完成的量，这样才能计算出精确的百分比。它的优点在于给用户一个清晰的预期，用户可以据此判断任务还需要多久完成，从而决定是等待还是去做其他事情。
而不确定进度条，它传递的是一种“正在忙碌”的状态，但并不提供任何关于完成时间的信息。它通常表现为持续的、循环的动画，比如一个左右来回移动的条纹，或者一个不停旋转的圈。我们选择不确定进度条，往往是因为任务的完成时间真的不可预测，或者预估成本太高。比如，向一个外部API发送请求，我们无法控制对方的响应速度；或者进行一个复杂的数据库查询，其耗时可能因数据量、服务器负载而异。如果在这种情况下强行显示一个确定性进度条，很可能会因为预估不准而出现进度条卡顿、跳变，甚至“倒退”的情况，这反而会极大地损害用户体验，让用户感到困惑和焦虑。所以，我的经验是，当你无法提供一个可靠的完成时间时，就老老实实地用不确定进度条。它虽然没有百分比，但至少传达了“系统没有崩溃，只是在努力工作”的信息，这本身就是一种安慰。
如何用纯CSS实现一个简单的线性不确定进度条？
实现一个简单的线性不确定进度条，CSS是首选，因为它性能好，浏览器支持广泛。这里我喜欢用一个包含伪元素的容器，通过动画让伪元素在容器内来回移动，或者改变背景位置。
我们先来构建一个基本的HTML结构：
然后是CSS部分。核心思想是让
.bar
这个元素在它的父容器
.indeterminate-progress-bar
里动起来。我通常会给
.bar
一个背景色，然后让它通过
transform: translateX()
来回移动，或者利用
background-image
和
background-position
来制造流动感。
这里我给出一个基于
transform
的实现：
.indeterminate-progress-bar { width: 100%; height: 4px; /* 进度条的高度 */ background-color: #e0e0e0; /* 进度条的背景色 */ overflow: hidden; /* 隐藏超出部分 */ position: relative; border-radius: 2px; /* 让边角圆润一些 */}.indeterminate-progress-bar .bar { content: ''; /* 伪元素需要content属性 */ display: block; height: 100%; width: 30%; /* 移动条的宽度 */ background-color: #4CAF50; /* 移动条的颜色 */ position: absolute; left: -30%; /* 初始位置，藏在左侧 */ animation: indeterminate-move 1.5s infinite ease-in-out; /* 动画效果 */}@keyframes indeterminate-move { 0% { left: -30%; /* 从左侧完全隐藏开始 */ } 50% { left: 100%; /* 移动到右侧完全隐藏 */ } 100% { left: -30%; /* 再次回到左侧，形成循环 */ }}
这段代码创建了一个灰色背景的进度条容器，然后里面的绿色条块会从左到右滑过，然后瞬间回到左侧再次开始。
ease-in-out
让动画在开始和结束时速度放缓，中间加速，看起来会更自然一些。你也可以尝试让它来回摆动，那需要调整
@keyframes
的定义，比如：
@keyframes indeterminate-move-pingpong { 0% { left: -30%; transform: translateX(0); } 50% { left: 100%; transform: translateX(-100%); /* 移动到最右边，然后自身也移动 */ } 100% { left: -30%; transform: translateX(0); }}/* 然后在.bar中应用 animation: indeterminate-move-pingpong 1.5s infinite ease-in-out; */
但通常，我发现简单的从左到右循环就足够了，避免过度复杂的动画逻辑。
除了线性条，还有哪些常见的视觉样式，以及如何实现一个旋转加载器？
除了上面提到的线性条，不确定进度条还有很多种常见的视觉样式，它们各有特点，适用于不同的UI场景。我个人比较常用的是：
旋转加载器 (Spinner)：这是最普遍的一种，一个不断旋转的环形或圆形图标。它不占用太多空间，适合放在按钮上、弹窗中央或者内容区域的局部加载。跳动/脉冲点 (Bouncing/Pulsing Dots)：几个小圆点依次或同步地放大缩小、上下跳动。这种样式比较活泼，适合在聊天应用、评论提交等场景。骨架屏 (Skeleton Screen)：这严格来说不是进度条，但它也是一种不确定加载的视觉反馈。在内容加载出来之前，先显示一个页面大致布局的灰色占位符，模拟内容的形状，给用户一种内容即将呈现的预期。这种方式用户体验非常好，因为它避免了白屏，让用户感觉内容加载得更快。
我们来尝试实现一个经典的旋转加载器 (Spinner)。这种通常也是通过CSS动画来完成的。
HTML结构可以很简单：
CSS实现：
.spinner { 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); /* 从0度开始 */ } 100% { transform: rotate(360deg); /* 旋转到360度 */ }}
这个
spinner
样式会创建一个灰色的圆环，其中一部分是蓝色的，通过
rotate(360deg)
的动画，让蓝色部分看起来像是在不断地追逐自己，形成一个流畅的旋转效果。
linear
让旋转速度保持恒定，看起来非常机械和稳定。
如果你想让它看起来更复杂一点，比如像Material Design那种多色旋转，那可能需要更多的伪元素或者SVG，但核心思路都是利用
transform: rotate()
来实现旋转。我发现，在实际项目中，一个简单的单色旋转器往往就足够了，因为它既能清晰地表达“正在加载”的语义，又不会因为过于花哨而分散用户的注意力。选择哪种样式，最终还是取决于你的产品设计风格和具体的使用场景。
以上就是如何实现不确定进度条的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1574129.html
微信扫一扫 
支付宝扫一扫 
