Load Progress Bar while waiting for setTimeout function

Question

I'm trying to create a site loader which will load bootstraps's progress-bar while sleeping and waiting for a page to load.

I'm using ajax in this way:

  $.ajax({
    type:'GET',
    url:'/', 
    success: function(res) {
      makeProgress()
      setTimeout(()=>{
        spinner.classList.add("no-display")
        list.innerHTML += `{% block content %}{% endblock %}`}, 300)
        },
    error:function(er){
      console.log("error")
    },
  })

And I would like to insert this function inside

    function makeProgress(){
      var i = 0;
      while (i < 100){
          i = i + 1;
          document.getElementById("side_loader").width = `${i}%`;
      }}