Модальный Bootstrap не будет отображаться, пока задание setTimeout не будет завершено

Question

Модальное значение Bootstrap не будет отображаться до тех пор, пока не будет выполнено задание в setTimeOut.

$('#myModal').modal('show');

items = 10
for (let i = 0; i < items; i++) {
    setTimeout(() => {

        // This line is to delay the count for doing a loading job.
        var timeAfterSecond = new Date().getTime() + 1000;
        while(new Date().getTime() < timeAfterSecond ){}

        console.log('Fired after 1 sec');
        console.log(i);
    }, 0);
}

<div class="modal" tabindex="-1" id="myModal" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Я хочу показать процентное значение в модальном режиме на последнем этапе. Но модальный изначально не будет отображаться.