启动过程的进度条模拟

Question

我有进度条：

  <div id="progress-modal" class="modal fade">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-body">
                        <div class="bar" :style="{ width: progress2 + '%' }">
                            <span>{{ progress2 }}%</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

我想显示它，逐渐将其填充到100，然后关闭并继续执行该功能。

        $("#progress-modal").modal('show')
        this.progress2=0;
       setInterval(function () {
           this.progress2+=5
           if (this.progress2>100){
               this.progress2=0;
            //   return;
           }
       },10000)
        $("#progress-modal").modal('hide')

但是模态窗口立即消失。 打开->添加任务 http://task.ru.xsph.ru/

更新：

    $("#progress-modal").modal('show')
                this.progress2=0;
  while (this.progress2<=100){
                    setInterval(function () {
                        this.progress2+=10;
                    },0.1)
                }
                $("#progress-modal").modal('hide')