Question on making simple progress bar.

I am trying to make a progress bar as follows. I am only able to write very simple code and my test example is here:

<html><head><title>Progress Bar</title></head><body>
<div><button id="run">Run</button></div>
<progress value="0" max="100" id="progress" style="width:100px;"></progress>
<script src='fengari_web.js' type="text/javascript" async></script>
<script type="application/lua" async>

local js = require "js"
local window = js.global
local document = window.document

progbar=document:getElementById("progress")
submit=document:getElementById("run")
submit:addEventListener("click", function() jim() end)

function jim()
  for i=1,10^7 do
        if i%10^6==0 then
        prog=math.floor(i/10^7*100)
        progbar.value=tostring(prog)  --only updates at the end
        print(prog)  --prints out in real time
      end
  end
end
</script></body></html>

The problem is that the progress bar only updates when the calculation has finished while the printed output to the console appears in real time. I have tried using promises and timeouts, etc, but I can't sort it out, sorry. Any help much appreciated.

fengari-lua / fengari-web

Question on making simple progress bar. #59