小编sst*_*gen的帖子

我有一个用户需要输入数据的网页.一旦他们输入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>

我搜索过类似的例子,可以根据我的需要进行调整,但运气不好.我也不确定我应该搜索什么或者称之为什么.也许这会被认为是一个逐步进步的酒吧？

任何提出解决方案的帮助都将不胜感激.