JSFiddle - React, Tailwind, and code Playground
HTML
<div class="outer_div">
<div class="inner_div">
<div id="percent_count">
</div>
</div>
</div>
CSS
.outer_div {
width: 250px;
height: 25px;
background-color: #CCC;
}
.inner_div {
width: 5px;
height: 21px;
position: relative; top: 2px; left: 5px;
background-color: #81DB92;
box-shadow: inset 0px 0px 20px #6CC47D;
-webkit-animation-name: progressBar;
-webkit-animation-duration: 3s;
-webkit-animation-fill-mode: forwards;
}
#percent_count {
font: normal 1em calibri;
position: relative;
left: 10px;
}
@-webkit-keyframes progressBar {
from {
width: 5px;
}
to {
width: 200px;
}
}