JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="box">
    <div class="line green"></div>
</div>
<div class="box">
    <div class="line red" style="transition-delay: 0.1s; width: 80%;"></div>
</div>
<div class="box">
    <div class="line yellow" style="transition-delay: 0.2s; width: 50%;"></div>
</div>
<button>fefwe</button>

CSS

body {
    background: black;
}
.box {
    margin: 50px;
    width: 300px;
    height:10px;
    position: relative;
    background: rgba(255,255,255,0.2);
    border-radius: 5px;
    overflow: hidden;
}
.box .line {
    width: 70%;
    height: 100%;
    position: absolute;
    left: 0;
    border-radius: 5px;
    top: 0;
    transform: scaleX(0);
    transform-origin: left;
    transition: cubic-bezier(0.57, 0.02, 0.26, 1.01) 1s;
}
.box .line.green {
    background-image: linear-gradient(to top, #10ec87, #10c2a7);
}
.box .line.red {
    background-image: linear-gradient(to top, #ec1010, #ff7045), linear-gradient(to bottom, #ff6853, #ff6853);
}
.box .line.yellow {
    background: #f9b63a;
}
.box.active .line {
    transform: scaleX(1);
}

JavaScript

$('button').on('click',function(){
	$('.box').toggleClass('active')
})