Как увидеть завершение загрузки прогресс бара?

Question

[jazzus]

Смотрел варианты создания баров на JS в интернете и ничего не понял)
Поэтому написал свой простой велосипед:

Компонент с баром от бутстрапа, который берет данные из пропса

<div class="progress">
    <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" :aria-valuenow="this.progress" aria-valuemin="0" aria-valuemax="100" :style="'width: '+this.progress+'%'"></div>
  </div>

Показываю компонент пока прогресс не станет 100:

<progress-component v-if="progress < 100"
              :progress="progress"
              >
              </progress-component>

В финале методов заполняю прогресс

fetchMetod() {
                    this.progress = this.progress + 10
        },

А контент показываю условием после всех фетчей

<div v-if="progress == 100”>
Контент
</div>

И таким образом бар заполняется до 100 (равномерно распределяю по методам) и после фетчей прорисовывается контент. Но я не успеваю увидеть загрузку – обрывается на половине. И это выглядит некрасиво. Не так как на других сайтах) У них, даже если данные загрузились, то бар завершает свою визуальную загрузку. И только потом пропадает. Отсрочка какая-то? Не понимаю, как сделать. Я знаю, что вы сейчас будете советовать закончить вуз/школу/армию, но все таки - можно ли как-то простым способом (например, в моем примере) завершить загрузку бара и не сразу вырубать бар после загрузки контента? Буду благодарен за инфу.

Answer 1

[0xD34F]

Чтобы увидеть завершение анимации прогресс бара, удалять его надо по событию transitionend. Добавьте отдельную переменную, которая будет отвечать за отображение прогресс бара, и меняйте её в соответствующем обработчике, как-то так.

Comments

[jazzus]

Уже практически получилось, остались математические трудности) Если честно я пока плохо понимаю, как работает этот метод. Я передаю в переменную progress по завершении каждого фетча по 25:

getProgress(progress) {
        this.progress = 0;
        this.showProgress = true;
        const interval = setInterval(() => {
          this.progress += progress;
          if (this.progress >= 100) {
            clearInterval(interval);
          }
        }, 500);
      },

Таким образом
this.getProgress(25);
4 метода по 25
Но в итоге у меня в переменной 175
По сколько передавать в метод? Не могу понять как там это считается)

[jazzus]

Походу я неправильно все понял

[jazzus]

0xD34F, все работает))