JSFiddle - React, Tailwind, and code Playground

by trustweb

HTML

<script src="//cdn.jsdelivr.net/prefixfree/1.0.7/prefixfree.min.js"></script>
<div id="progress"></div>

<button id="start">start</button> <button id="stop">stop</button>

CSS

#progress {
    background-color: blue;
    height: 10px;
    transition: width 0.1s ease-out;
    width: 0;
}

JavaScript

var progressBar = document.getElementById("progress");
var start = new Date();

$('#start').click(function(){
    var start = new Date();
    animateProgress();
});

$('#stop').click(function(){
    progressLimit=0;
});

function animateProgress(){
    var timer = setInterval(function() {
        var t = new Date() - start;
    
        if progressBar.style.width < 400) {
            progressBar.style.width += 20 + "px";
        } else {
            clearInterval(timer);
        }
    }, 100);
}