JSFiddle - React, Tailwind, and code Playground
HTML
<div class="title">
<div class="title-inner">Lorem Ipsum</div>
<div id='line'>
<div id='load'></div>
</div>
</div>
CSS
body {
background: black;
color: #ddd;
font-family: Helvetica, sans-serif;
margin: 2em;
}
.title-inner {
padding: 17px;
}
#line {
background-color:purple;
height:2px;
width:100%;
}
#load {
background-color:yellow;
height:100%;
width:0%;
}
JavaScript
function loop() {
$('#load').animate({
width: "50%"
}, 1600);
$('#load').promise().done(function () {
$(this).width(0);
});
}
loop();