I've been trying to create a loading progress bar using HTML w/o JQ, but i cant make it. anyone has idea?

Question

when i said loading what i mean is an updating progress bar, one that the green bar covers the white bar horizontally, somewhat like that.

this is the code im using....

<button onclick="myFunction1()">Progress Bar?</button>
<progress id= "z" min="0" max="100" value="0">
</progress>
<script>
function myFunction1(){
var x= document.getElementsById("z").value;
for(var a=0; a<100; a++){
x=a;
}
}

i think the problem is the code itself so im gonna ask here :) hoping someone would notice...

Answer 1

https://code.sololearn.com/WlXAHC0Sv2oa/?ref=app

Answer 2

try this 👇👇

function myFunction1(){
var x= document.getElementById("z");

var a=0,intvl;
intvl = setInterval(function(){
x.value = a;
a++;
if(a>100) clearInterval(intvl);
},100);

}