JSFiddle - React, Tailwind, and code Playground

by tammasr

HTML

<div id="myProgress">
  <div id="myBar"></div>
</div>

<div>
<button id="clickBtn">
Click
</button>
</div>

CSS

#myProgress {
    width: 100%;
    background-color: grey;
}
#myBar {
    width: 1%;
    height: 30px;
    background-color: green;
}

JavaScript

// https://media.giphy.com/media/3ov9jHVfZ1pQqpPqP6/giphy.gif

function move() {
console.log('move is called');
    var elem = document.getElementById("myBar"); 
    var width = 1;
    var id = setInterval(frame, 10);
    function frame() {
        if (width >= 100) {
            clearInterval(id);
        } else {
            width++; 
            elem.style.width = width + '%'; 
        }
    }
  
}

document.getElementById('clickBtn').addEventListener('click', move);