如何实现不确定进度条

不确定进度条通过循环动画传达系统正在处理，适用于无法预估完成时间的场景，如网络请求；而确定性进度条显示具体百分比，需明确任务总量与进度。选择取决于是否能可靠估算时间：不可预测时用不确定进度条，避免误导用户。纯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

百度·度咔剪辑

度咔剪辑，百度旗下独立视频剪辑App

3

查看详情

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

以上就是如何实现不确定进度条的详细内容，更多请关注php中文网其它相关文章！