Looking to enhance user experience on my webpage by creating a progress bar for data entry. The goal is for users to enter 10 items before proceeding.
The challenge I'm facing is developing a progress bar that accurately reflects the number of items entered versus remaining. Here's an image demonstrating what I want to achieve.
My current attempt involved using Bootstrap's stacked progress bars. However, the issue lies in the fact that the unfilled section appears as a single unbroken region, failing to indicate the individual segments left to complete. You can view the problem in this fiddle.
Below is the code snippet from the fiddle:
<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>
I've scoured the internet for similar examples but haven't found a suitable solution yet. I'm unsure of the specific terminology used for this design - perhaps it could be categorized as a step-wise progress bar?
If anyone has ideas or suggestions on how to tackle this issue, I would greatly appreciate your insights.