Request Animation Frame Progress

requestAnimationFrame schedules DOM updates for the next browser paint while a progress bar advances.

Program

requestAnimationFrame is the browser-friendly way to run visual updates because it aligns work with repaint timing.

request_animation_frame_progress.html

<div id="bar"><span></span></div>
<output id="label">0%</output>
<script>
  const barFill = document.querySelector("#bar span");
  const labelEl = document.querySelector("#label");
  let progress = 0;
  function tick() {
    progress += 25;
    barFill.style.width = progress + "%";
    labelEl.textContent = progress + "%";
    if (progress < 100) requestAnimationFrame(tick);
  }
  requestAnimationFrame(tick);
</script>

requestAnimationFrame requestAnimationFrame schedules visual work before the next repaint.

paint A paint is the browser step that updates pixels on screen.