Есть простой скрипт для вычисления процента выполнения цикла:
window.onload = function () {
let line = document.querySelector('#line');
function animateLine() {
let n = 10000;
let step = 100 / n;
let output_step = 0;
for (i = 0; i < n; i++) {
output_step += step;
line.style.width = output_step + "%";
console.log(output_step);
}
}
animateLine();
}
Суть идеи была в том, чтобы визуализировать процент работы цикла как линию в html(т.е в html есть блок, который увеличивает свою длину по мере выполнения цикла).
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Coffee</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="showMenu.js"></script>
</head>
<body>
<div id="line"></div>
<script src="script.js"></script>
<style>
#line {
width: 10%;
height: 20px;
background: red;
}
</style>
</body>
</html>
Процент вычисляется верно, но проблема в том, что в процессе выполнения цикла я не могу изменять стили(страница в момент выполнения цикла как-бы зависает). Т.е линия изменяет свою ширину только после выполнения цикла и ширина сразу становится равна 100%. Есть ли инструменты, при помощи которых можно исправить эту проблему?
