JSFiddle - React, Tailwind, and code Playground

by MegaScience

HTML

<table>
  <tr>
    <td>Downloading progress:</td>
    <td><progress id="progressbar" value="0" max="100" style="width: 100%"></progress></td>
  </tr>
  <tr>
    <td></td>
    <td><meter id="meterbar" value="0" min="0" max="100" style="width: 100%">2 out of 10</meter></td>
  </tr>
  <table>

JavaScript

const increment = (() => {
  const pb = document.getElementById('progressbar'), mb = document.getElementById('meterbar')
  let prog = 0
  return () => pb.value = mb.value = (++prog > 100 ? prog = 0 : prog)
})()

setInterval(increment, 25)

/*var progress = 0;
var progressbar = document.getElementById("progressbar");
var meterbar = document.getElementById("meterbar");

function incrementProgress() {
    progress++;
    if (progress > 100) progress = 0;
    progressbar.value = meterbar.value = progress;
}
setInterval(incrementProgress, 10);*/