A demo of multi-colored progress bar

Bootstrap Code

Output

<!DOCTYPE html>
<html>
<head>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
 
<body>
<div class="container">
<h3>A demo of multi-color progress bar</h3>
    <div class="row">
        <div class="col-md-6">
        <div class="progress">
 <div class="progress-bar progress-bar-info" style="width: 20%">
    20%
  </div>
  <div class="progress-bar progress-bar-danger progress-bar-striped" style="width: 30%">
    30% Complete
  </div>
  <div class="progress-bar progress-bar-success progress-bar-striped active" style="width: 40%">
    40%
  </div>
        </div>
       </div>
      </div>

</div>
</body>
 
</html>

A demo of multi-color progress bar

20%

30% Complete

40%