JSFiddle - React, Tailwind, and code Playground
HTML
<p class="oe_web_example_fileu">
<button id="convertedr" onclick="progressBarSim(100);">Press</button>
<progress id="progressBar" value="0" max="100" style="width:300px;"></progress> <span id="status"></span>
<h1 id="finalMessage"></h1>
</p>
JavaScript
progressBarSim = function (al) {
var bar = document.getElementById('progressBar');
var status = document.getElementById('status');
var btn = document.getElementById('convertedr');
btn.disabled = true;
status.innerHTML = al + "%";
bar.value = al;
var sim = setTimeout("progressBarSim(" + al +")", 300);
if (al == 100) {
status.innerHTML = "100%";
bar.value = 100;
clearTimeout(sim);
var finalMessage = document.getElementById('finalMessage');
finalMessage.innerHTML = "Process is complete";
}
al = al + 1;
};