如何实现不确定进度条

不确定进度条通过循环动画传达系统正在处理，适用于无法预估完成时间的场景，如网络请求；而确定性进度条显示具体百分比，需明确任务总量与进度。选择取决于是否能可靠估算时间：不可预测时用不确定进度条，避免误导用户。纯css可通过@keyframes实现线性滑动或旋转加载器，如利用transform: translateX()创建移动条，或transform: rotate()实现旋转spinner，配合无限循环动画提升用户体验。常见样式包括线性条、旋转圈、跳动点和骨架屏，各适配不同ui需求。

不确定进度条的实现核心在于通过动画效果，持续地向用户传达“系统正在处理中，请稍候”的信息，而无需告知具体的完成百分比。它通常用于那些我们无法准确预估完成时间的操作，比如网络请求、复杂的后台计算或文件上传到未知大小的服务器。

一个常见的实现思路是利用CSS的

animation

属性配合

@keyframes

来创建循环的视觉效果，例如一个不断移动的条块、一个旋转的加载图标，或者几个跳动的小圆点。关键在于动画的无限循环和流畅性，让用户感受到进程的活跃。

不确定进度条与确定性进度条有何区别，以及何时选择它们？

在我看来，这两种进度条虽然都旨在提升用户体验，但它们背后的设计哲学和适用场景是截然不同的。确定性进度条，顾名思义，它能明确显示任务的完成百分比，比如“下载进度：50%”。这种进度条要求我们能准确地知道任务的总量和当前已完成的量，这样才能计算出精确的百分比。它的优点在于给用户一个清晰的预期，用户可以据此判断任务还需要多久完成，从而决定是等待还是去做其他事情。

而不确定进度条，它传递的是一种“正在忙碌”的状态，但并不提供任何关于完成时间的信息。它通常表现为持续的、循环的动画，比如一个左右来回移动的条纹，或者一个不停旋转的圈。我们选择不确定进度条，往往是因为任务的完成时间真的不可预测，或者预估成本太高。比如，向一个外部API发送请求，我们无法控制对方的响应速度；或者进行一个复杂的数据库查询，其耗时可能因数据量、服务器负载而异。如果在这种情况下强行显示一个确定性进度条，很可能会因为预估不准而出现进度条卡顿、跳变，甚至“倒退”的情况，这反而会极大地损害用户体验，让用户感到困惑和焦虑。所以，我的经验是，当你无法提供一个可靠的完成时间时，就老老实实地用不确定进度条。它虽然没有百分比，但至少传达了“系统没有崩溃，只是在努力工作”的信息，这本身就是一种安慰。

如何用纯CSS实现一个简单的线性不确定进度条？

实现一个简单的线性不确定进度条，CSS是首选，因为它性能好，浏览器支持广泛。这里我喜欢用一个包含伪元素的容器，通过动画让伪元素在容器内来回移动，或者改变背景位置。

我们先来构建一个基本的html结构：

<div class="indeterminate-progress-bar">   <div class="bar"></div> </div>

然后是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场景。我个人比较常用的是：

1. 旋转加载器 (Spinner)：这是最普遍的一种，一个不断旋转的环形或圆形图标。它不占用太多空间，适合放在按钮上、弹窗中央或者内容区域的局部加载。
2. 跳动/脉冲点 (Bouncing/Pulsing Dots)：几个小圆点依次或同步地放大缩小、上下跳动。这种样式比较活泼，适合在聊天应用、评论提交等场景。
3. 骨架屏 (Skeleton Screen)：这严格来说不是进度条，但它也是一种不确定加载的视觉反馈。在内容加载出来之前，先显示一个页面大致布局的灰色占位符，模拟内容的形状，给用户一种内容即将呈现的预期。这种方式用户体验非常好，因为它避免了白屏，让用户感觉内容加载得更快。

我们来尝试实现一个经典的旋转加载器 (Spinner)。这种通常也是通过CSS动画来完成的。

HTML结构可以很简单：

<div class="spinner"></div>

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()

来实现旋转。我发现，在实际项目中，一个简单的单色旋转器往往就足够了，因为它既能清晰地表达“正在加载”的语义，又不会因为过于花哨而分散用户的注意力。选择哪种样式，最终还是取决于你的产品设计风格和具体的使用场景。