Html 引导3中的分段进度条

我有一个用户需要输入数据的网页。一旦他们输入了10个项目，他们就可以继续了

我试图创建一个进度条，以直观地表示他们已经输入/还有多少项需要输入

这是我试图创建的图像

到目前为止，我得到的最接近的结果是使用Bootstrap的堆叠进度条。但是，对于堆叠的钢筋，未填充的部分是一个单独的完整区域-它不显示剩余的分段数

以下是小提琴上的标记：

<div class="container">
    <div class="progress progress-bar-segmented">
        <div class="progress-bar" style="width: 10%"></div>
        <div class="progress-bar" style="width: 10%"></div>
        <div class="progress-bar" style="width: 10%"></div>
    </div>
</div>

我一直在寻找类似的例子，这些例子可以根据我的需要进行调整，但运气不太好。我也不确定我到底应该搜索什么，或者这个叫什么。也许这会被认为是一个循序渐进的进度条

---

如果您能提供任何解决方案，我们将不胜感激。

对于您来说，由于您不希望项目内部的区域按百分比填充，我建议您只创建十个并排的空div，并添加类，以便在项目填充时用颜色填充它们

只需单击下面的运行代码片段，看看我的意思

.container{
宽度：100%；
}
.项目{
宽度：10%；
边框：1px纯灰；
背景颜色：浅灰色；
边界半径：3px；
右边距：2px；
浮动：左；
显示：块；
高度：20px；
}
.填充{
背景色：蓝色！重要；
}