JSFiddle - React, Tailwind, and code Playground

by mlms13

HTML

<div id="container">
    <div id="slider">
    </div>
</div>

CSS

#container {
    background: #666;
    width: 450px;
}
#slider {
    background: #9d6;
    height: 12px;
    width: 0;
}

JavaScript

var bar = document.getElementById('slider');

function expandRight(el, time) {
    var interval,
        distance = el.parentNode.offsetWidth,
        freq = time / distance,
        currentWidth = el.offsetWidth || 0;

    interval = setInterval(function () {
        if (currentWidth  >= distance) {
            clearInterval(interval);
        } else {
            currentWidth++;
        }
        el.style.width = currentWidth + 'px';
    }, freq);
}

expandRight(bar, 400);