CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
otorrillas
otorrillas

Reputation: 4773

Splitting progress bar

At this moment, I have the following progress bar: ProgressBar1

Created with the following code:

<div class="progress">
    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="25" 
        aria-valuemin="0" aria-valuemax="100" style="width: 25%;">
        Process1
    </div>
    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="25" 
        aria-valuemin="0" aria-valuemax="100" style="width: 25%;">
        Process2
    </div>
    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="25" 
        aria-valuemin="0" aria-valuemax="100" style="width: 25%;">
        Process3
    </div>
    <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="25" 
        aria-valuemin="0" aria-valuemax="100" style="width: 25%;">
        Process4
    </div>


</div>

What I would want to achieve is to differentiate the different process; If the color is different (like between Process3 and Process4), actually it is clearly differentiated. However, if it is the same color, it gets hard to know what % belongs to one process or another. So I would like to insert a line between them. In summary, I would like something similar to the following: Progress bar with lines

Upvotes: 3

Views: 7000

Answers (1)

Maharkus
Maharkus

Reputation: 2898

Putting a border-right on all .progress-bar except for :last-child will do the trick:

.progress-bar {
    border-right: solid 5px #FFF;
}
.progress-bar:last-child {
    border: none; 
}

Gives you this:

Example Screenshot

Example Demo

.progress-bar {
  border-right: solid 5px #FFF;
}
.progress-bar:last-child {
  border: none;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%;">
    Process1
  </div>
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%;">
    Process2
  </div>
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%;">
    Process3
  </div>
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%;">
    Process4
  </div>


</div>

Upvotes: 10

Related Questions