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

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

我可以制作3个单独的酒吧，但我想让它类似于

要制作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>

最终的目标是我将有一个绿色部分，黄色部分填充下一部分，然后红色填充剩余部分的酒吧

---

这不可能使用进度元素，您需要创建自己的进度条，其外观如下：

。进度{
背景色：#ccc；
宽度：100%；
高度：10px；
}
.进度条{float:left；}
.进度条.橙色{
背景颜色：橙色；
身高：100%；
}
.进度条.蓝色{
背景颜色：蓝色；
身高：100%；
}
.进度条.黄色{
背景颜色：黄色；
身高：100%；
}

---

使用线性渐变背景是否更美观？