JSFiddle - React, Tailwind, and code Playground

HTML

<div id="loading_bar">
    <div id="buffer" style="width:80%"></div>
    <div id="progress" style="width:60%"></div>
    <div id="bar3" style="width:40%"></div>
    <div id="bar4" style="width:20%"></div>
</div>

CSS

body {
  margin: 5px;
  border:1px solid #222;
}

#loading_bar {
  border-radius:7px;
  background-color:#666;
  width:660px;
  overflow:hidden;
  height:8px;
}

#loading_bar>div {
  border-radius:7px;
  height:100%;
  width:0%;
  margin-top:-8px;
}
#loading_bar>div:first-child {
  margin-top:0;
}
#buffer {
  box-shadow:1px 0 8px #000;
  background-color:#0474C0;
}
#progress {
  box-shadow: 0 0 8px #000;
  background-color:pink;
}
#bar3{background:yellow;}
#bar4{background:red;}