布尔玛进度条不确定

在编写程序或开发应用程序时，我们通常需要显示进度条，以在长时间运行的操作中表示进度和剩余时间。其中一种进度条是不确定进度条，它不显示剩余时间或进度，而是表明操作正在进行。

其中，布尔玛进度条是一种常见的不确定进度条，它由若干个动态地改变大小和颜色的圆形球组成，如下图所示：

这些球的数量可以是可配置的，它们的大小和颜色是不断变化的，以指示操作正在进行。这种进度条通常被用于长时间的异步操作，如文件下载，网络请求等。

实现

实现布尔玛进度条最简单的方法是使用CSS动画。以下是一个基本的HTML/CSS代码片段：

<div class="bolma-progress">
  <div class="bolma-progress-bar"></div>
  <div class="bolma-progress-ball"></div>
  <div class="bolma-progress-ball"></div>
  <div class="bolma-progress-ball"></div>
  <div class="bolma-progress-ball"></div>
  <div class="bolma-progress-ball"></div>
</div>

.bolma-progress {
  position: relative;
  width: 200px;
  height: 15px;
  background-color: #ddd;
  border-radius: 10px;
}
.bolma-progress-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 20%;
  background-color: #57aade;
  border-radius: 10px;
  animation: bolma-progress-bar 1s infinite;
}
.bolma-progress-ball {
  width: 15px;
  height: 15px;
  margin-right: 5px;
  background-color: #57aade;
  border-radius: 50%;
  display: inline-block;
  animation: bolma-progress-ball 1s infinite;
  animation-delay: calc(0.1s * var(--index));
}
@keyframes bolma-progress-bar {
  0% {
    width: 20%;
    left: 0;
  }
  20% {
    width: 40%;
    left: 20%;
  }
  40% {
    width: 60%;
    left: 40%;
  }
  60% {
    width: 80%;
    left: 60%;
  }
  80% {
    width: 100%;
    left: 80%;
  }
  100% {
    width: 20%;
    left: 0;
  }
}
@keyframes bolma-progress-ball {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }
  50% {
    transform: scale(0.5);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0.5;
  }
}

上述代码中，.bolma-progress是进度条的外层div，.bolma-progress-bar是进度条本身，.bolma-progress-ball是圆形球。我们使用animation属性创建动画效果，并使用--index变量来控制动画延迟时间。

结束语

布尔玛进度条是一种非常简单但实用的进度条，在许多应用程序和网站中广泛使用。通过使用CSS动画和变量，可以轻松地创建布尔玛进度条，并对其进行自定义。