JSFiddle - React, Tailwind, and code Playground

by pkysylevych

HTML

<div class="progress bar1"></div>
<div class="progress bar2"></div>
<div class="progress bar3"></div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<div class="container">
  <h2>Stacked Progress Bars</h2>

  <div class="progress">
    <div class="progress-bar progress-bar-success" role="progressbar" style="width:40%">
      Free Space
    </div>
    <div class="progress-bar progress-bar-warning" role="progressbar" style="width:10%">
      Warning
    </div>
    <div class="progress-bar progress-bar-success" role="progressbar" style="width:40%">
      Free Space
    </div>
    <div class="progress-bar progress-bar-danger" role="progressbar" style="width:20%">
      Danger
    </div>
  </div>
</div>

CSS

.progress {
 height:52px;
 width:1440px;
 border:1px solid #000;
 text-align:center;
 color:#fff;
 font-size:20px; 
}

.bar1 {
  background:linear-gradient(to right, gray 20%, blue 20%, gray 50%,yellow 50%,yellow 60% ,green 0);
}
.bar2{
  background:linear-gradient(to right, red 20%, blue 20%, blue 50%,yellow 50%,yellow 60% ,green 0);
}
.bar3{
  background:linear-gradient(to right, red 20%, blue 20%, blue 50%,yellow 50%,yellow 60% ,green 0);
}