Мой HTML, CSS и JS индикатор выполнения не работает

Question

Я пытаюсь сделать индикатор выполнения, чтобы пользователи могли знать, когда будет загружен их файл. Я не знаю, что я сделал не так, но стиль индикатора выполнения не обновляется в течение l oop.

var filesize = 1000 //this is not the final value 
var progressbar = document.getElementById("progress");
function myFunction(){
  for(var i = 0; i <= filesize; i++){
    x = i/ filesize * 100;
    x = parseInt(x.toString().slice(0, 3));
    console.log(x + "%")
    progressbar.style.width = x + "%";
  }
}

#bar{
    width: 35%;
    background-color: rgba(0,0,0,0.17);
    border-radius: 130px;
    margin: auto;
  }
  #progress{
    width: 0%;
    height: 30px;
    background-color: rgb(255, 0, 0);
    border-radius: 130px;
  }

    <button onclick="myFunction()">Click me</button>
    <div id="bar">
      <div id="progress"></div>
    </div>

Answer 1

Вы можете плавно перемещать индикатор выполнения, добавив свойство transition в CSS.

Чем больше время перехода, тем медленнее будет выполняться индикатор выполнения.

var filesize = 1000 //this is not the final value 
var progressbar = document.getElementById("progress");
function myFunction() {
  for (var i = 0; i <= filesize; i++) {
    x = i/ filesize * 100;
    x = parseInt(x.toString().slice(0, 3));
    console.log(x + "%")
    progressbar.style.width = x + "%";
  }
}

#bar {
  width: 35%;
  background-color: rgba(0,0,0,0.17);
  border-radius: 130px;
  margin: auto;
}
   
#progress {
  width: 0%;
  height: 30px;
  background-color: rgb(255, 0, 0);
  border-radius: 130px;
  transition: 0.2s;
}

<button onclick="myFunction()">Click me</button>
  <div id="bar">
    <div id="progress">
  </div>
</div>