How to function the progress tag on html using Javascript?

Question

I want to function the progress bar on a web page before the page is completely loaded.

Answer 1

Using JavaScript you'll have to monitor the 5 loading states using the .readyState property in which returns a string. The states are: uninitialized, loading, loaded, interactive and complete. Doing simple math you can set the value of the progress bar to where it is, and you'll have to call the function repeatedly using a timer interval to catch them. Don't forget to clear the interval after or it will just carry on running excessively.

<progress value="0" max="100" id="readyState"></progress>

<script>
// your progress bar with an id
var prog = document.getElementById("readyState");

var checkState = setInterval(function(){
var loadState = document.readyState;
switch(loadState){
case 'uninitialized':
prog.value = '20';
break;
case 'loading':
prog.value = '40';
break;
case 'loaded':
prog.value = '60';
break;
case 'interactive':
prog.value = '80';
break;
case 'complete':
prog.value = '100';
clearCheck();
break;
}
}, 10);

function clearCheck(){
clearInterval(checkState);
}
</script>

// every 10 milliseconds which is very fast

Instead of writing the complete case, you could do the following as the last and final option could be only 'complete':

default:
prog.value = '100';

Answer 2

@Mark Foxx Thanks !

Answer 3

@Mark Foxx Its giving me an error.
Here is the error:
"Cannot set property 'value' of null.
Line:18"

Please Help me .. TIA