如何使用 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>

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

Answer 1

使用进度元素无法做到这一点，您需要创建自己的进度条，如下所示：

.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>

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

How to stack progress bars into one bar with Bulma css

html

css

bulma