进度条如何实现？详解实现方法

编程并不是一个机械性的工作，而是需要有思考，有创新的工作，语法是固定的，但解决问题的思路则是依靠人的思维，这就需要我们坚持学习和更新自己的知识。今天golang学习网就整理分享《不确定进度条怎么实现？》，文章讲解的知识点主要包括，如果你对文章方面的知识点感兴趣，就不要错过golang学习网，在这可以对大家的知识积累有所帮助，助力开发能力的提升。

不确定进度条通过循环动画传达系统正在处理，适用于无法预估完成时间的场景，如网络请求；而确定性进度条显示具体百分比，需明确任务总量与进度。选择取决于是否能可靠估算时间：不可预测时用不确定进度条，避免误导用户。纯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()来实现旋转。我发现，在实际项目中，一个简单的单色旋转器往往就足够了，因为它既能清晰地表达“正在加载”的语义，又不会因为过于花哨而分散用户的注意力。选择哪种样式，最终还是取决于你的产品设计风格和具体的使用场景。

今天关于《进度条如何实现？详解实现方法》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！