JSFiddle - React, Tailwind, and code Playground
HTML
<progress max="100" value="1"></progress>
<button id="theButton">Start!</button>
JavaScript
$(document).ready(function(){
var msecsPerUpdate = 1000/60; // # of milliseconds between updates, this gives 60fps
var progress = $('progress');
var duration = 3; // secs to animate for
var interval = progress.attr('max')/(duration*1000/msecsPerUpdate);
var animator = function(){
progress.val(progress.val() + interval);
if (progress.val() + interval < progress.attr('max')){
setTimeout(animator, msecsPerUpdate);
} else {
progress.val(progress.attr('max'));
}
}
$('#theButton').click(animator);
});