JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="line line-1">
    <span></span>
</div>
<div class="line line-2">
    <span></span>
</div>
<div class="line line-3">
    <span></span>
</div>

CSS

div.line {
    width: 500px;
    height: 3px;
    background: red;
    margin: 5px 0;
    position: relative;
    overflow: hidden;
}
div.line span{
    width: 100%;
    height: 100%;
    position: absolute;
    background: black;
    transform: scaleX(0);
    transform-origin: left;
}

JavaScript

var count = 0;
var position = 1;
var elems = document.querySelectorAll('.line');
var len = elems.length;
var fn = function(){
    
    count++;

	document.querySelector('.line-' + position + ' span').style.transform = 'scaleX(' + (count / 300) + ')';

    if(count === 300){
    	
        position = position + 1;
        if(position > len){
        	position = 1;
        }
        
    	count = 0;
    }
    
	requestAnimationFrame(fn)
}
requestAnimationFrame(fn)