Barra di avanzamento segmentata in Bootstrap 3

Question

Ho una pagina Web in cui un utente deve inserire i dati. Una volta inseriti 10 oggetti, possono continuare.

Sto provando a creare una barra di avanzamento per rappresentare visivamente quanti elementi sono stati immessi/lasciati entrare.

Ecco un'immagine di quello che sto cercando di creare

Finora, il più vicino ho ottenuto è usare le barre di avanzamento pila di Bootstrap. Tuttavia, con le barre impilate, la sezione non riempita è una singola regione ininterrotta - non mostra quanti segmenti sono rimasti. Here's a fiddle showing what I mean.

Ecco il markup dal violino:

<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> 

Ho cercato esempi simili che potrebbero essere adattati per soddisfare le mie esigenze, ma non hanno avuto molta fortuna. Inoltre, non sono sicuro esattamente di cosa dovrei cercare o come chiamarlo. Forse questo sarebbe considerato una barra di avanzamento graduale?

Qualsiasi aiuto in arrivo con una soluzione sarebbe molto apprezzato.

Answer 1

Nel tuo caso, poiché non vuoi che l'area all'interno degli elementi sia riempita in percentuale, ti consiglio di creare dieci div vuote una accanto all'altra, e aggiungere le classi per riempirle di colore quando gli oggetti sono riempiti .

Basta fare clic su snippet di codice di esecuzione qui sotto e vedere cosa intendo.

.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>

Usa che bootstrap componente solo se è necessario per riempire il div in parti percentuali calcolati. Per quanto riguarda gli stili, è possibile importare gli stili da bootstrap.

MA, se si vuole molto difficile da utilizzare il componente di bootstrap, ho una brutta soluzione here.