Помогите новичку в освоении JavaScript/HTML5.
Есть полоса прогресса, заданная через тэг <progress>. 100 раз в цикл её значение меняется от 1 до 100. Полоса как бы должна плавно заполнится. Но почему то при выполнении программы цикла просто в конце присваивается значение 100. До конца цикла полоса пустая, а потом резко полная становится.
Вот код (без <?, ?> только):
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Полоса прогресса</title>
<script>
function cycle(num) {
var point = num*10*1000; // сотая доля операций
/*
каждые num*10000 операций часное i/point - это целое число от 1 до 100.
Записываем этот резульатат в значение тэга progress
*/
for (i = 1; i <= num*1000*1000; ++i) if (Math.round(i/point) == i/point) document.getElementById('result').value = i/point;
document.getElementById('cycle').result.value = 'Сделано!';
}
</script>
</head>
<body>
<header><h1>Полоса прогресса</h1></header>
<form id="cycle">
<p>Сколько <u>миллионов</u> раз прогоняем цикл?</p>
<input type="number" name="num" min="5" max="100" step="5" value="5"><br>
<button type="button" onclick="cycle(num.value)">Done!</button>
<p>Прогресс:</p>
<progress id="result" value="0" max="100"></progress><br>
<output name="result"></output>
</form>
</body>
</html>