Vertical Stacked Progress Bars With Two Colors

Question

I am trying to create a progress tracker based on completion, attempted & total count using bootstrap but not able to make two colors in the single progress bar

Does anyone know how I can achieve like below progress tracker?

Answer 1

Use code bellow:(set width as you want)

.container { margin-top: 50px; }


.progress{
  transform: rotate(-90deg);
  width: 105px;
} 

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
  <div class="container">
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>

here is progress in bootstrap 4:https://getbootstrap.com/docs/4.0/components/progress/
for vertical use: transform: rotate(-90deg);

EDIT TO YOUR COMMENT

.progress{
 transform: rotate(-90deg);
  width: 105px;
  margin-top:160px;
margin-left: -81px;
} 
.flexable{display: flex;}

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>


<div class="container">
<div class="flexable">
  <div class="progress"> 
      <div class="progress-bar" role="progressbar" style="width: 30%;" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100">
  </div> 
  </div> 

<div class="progress"> <div class="progress-bar" role="progressbar" style="width: 90%;" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar" role="progressbar" style="width: 75%;" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div> </div> </div>
<div>