Segmented Progress Bar in Bootstrap 3

Question

I have a webpage where a user needs to enter data. Once they enter 10 items, they can continue.

I'm trying to create a progress bar to visually represent how many items they have entered/have left to enter.

Here is an image of what I'm trying to create

So far, the closest I've gotten is using Bootstrap's stacked progress bars. However, with the stacked bars, the unfilled section is a single unbroken region - it doesn't show how many segments are left. Here's a fiddle showing what I mean.

Here's the markup 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 searched for similar examples that could be adapted to meet my needs, but haven't had much luck. I'm also not sure exactly what I should be searching for or what to call this. Maybe this would be considered a step-wise progress bar?

Any help coming up with a solution would be greatly appreciated.

Answer 1

In your case, as you don't want the area inside the items to be filled percentually, I would recommend just creating ten empty divs side by side, and add the classes to fill them with color as the items are filled.

Just click to Run code snippet below and see what I mean.

.container {
    width: 100%;
}

.item {
    width: 10%;
    border: 1px solid grey;
    background-color: lightgray;
    border-radius: 3px;
    margin-right: 2px;
    float: left;
    display: block;
    height: 20px;
}

.filled {
    background-color: blue !important;
}

<div class="container">
    <div class="item filled"></div>
    <div class="item filled"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

Use that bootstrap component only if you need to fill the divs in percentual parts. As for the styles, you can import the styles from bootstrap.

BUT, if you want very hard to use the bootstrap component, I have an ugly workaround here.