html - 如何使用 Bulma css 将进度条堆叠成一个条

Question

我正在尝试创建一个进度条，它由多种颜色组成，所有颜色加起来填充一个单一的条。

我可以制作 3 个单独的条形图，但我想让它类似于 Bootstrap one

制作 3 个小节我已经完成了:

<progress class="progress is-success" value="50" max="100"></progress>
<progress class="progress is-warning" value="35" max="100"></progress>
<progress class="progress is-danger" value="15" max="100"></progress>

最终目标是我要有一个 strip 绿色部分，黄色部分填充下一部分，然后红色填充其余部分。

Answer 1

使用 progress 元素这是不可能的，你需要创建自己的进度条，看起来像这样:

.progress {
  background-color: #ccc;
  width: 100%;
  height: 10px;
}

.progress-bar { float: left; }

.progress-bar.orange {
  background-color: orange;
  height: 100%;
}

.progress-bar.blue {
  background-color: blue;
  height: 100%;
}

.progress-bar.yellow {
  background-color: yellow;
  height: 100%;
}

<div class="progress">
  <div class="progress-bar orange" style="width:10%;"></div>
  <div class="progress-bar blue" style="width:30%;"></div>
  <div class="progress-bar yellow" style="width:50%;"></div>
</div>