Event Loop

You are working on a project and you were given a task to create a progress bar illustrating the progress of the script execution. You didn't know exactly how to do this, so you asked your colleagues for help. They gave you several code samples, but only one of them is correct.

Choose the correct one:

A)

<div id="progress"></div>

<script>

  function create() {
    for (let i = 0; i < 100; i++) {
      i++;
      document.getElementById("progress").innerHTML = i + "%";
    }
  }

  create();
</script>

B)

<div id="progress"></div>

<script>
  let i = 0;
  function calculate() {
    do{
      i++;
      document.getElementById("progress").innerHTML = i + "%";

    } while (i % 10 != 0);
  
    if (i < 100) {
      setTimeout(function() { calculate(); }, 1000);
    }
  }

  calculate();
</script>

C)

<div id="progress"></div>

<script>
  let i = 0;

  function load() {

    do {
      i++;
      progress.innerHTML = i + "%";
    } while (i % 10 != 0);

    if (i < 100) {
      queueMicrotask(load());
    }

  }

  load();
</script>

D)

<div id="progress"></div>

<script>
  let i = 0;

  function highlight() {

    do {
      i++;
      progress.innerHTML = i + "%";
      queueMicrotask(highlight());
    } while (i % 10 != 0);

  }

  highlight();
</script>