@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 (равномерно распределяю по методам) и после фетчей прорисовывается контент. Но я не успеваю увидеть загрузку – обрывается на половине. И это выглядит некрасиво. Не так как на других сайтах) У них, даже если данные загрузились, то бар завершает свою визуальную загрузку. И только потом пропадает. Отсрочка какая-то? Не понимаю, как сделать. Я знаю, что вы сейчас будете советовать закончить вуз/школу/армию, но все таки - можно ли как-то простым способом (например, в моем примере) завершить загрузку бара и не сразу вырубать бар после загрузки контента? Буду благодарен за инфу.
  • Вопрос задан
  • 79 просмотров
Решения вопроса 1
0xD34F
@0xD34F
Чтобы увидеть завершение анимации прогресс бара, удалять его надо по событию transitionend. Добавьте отдельную переменную, которая будет отвечать за отображение прогресс бара, и меняйте её в соответствующем обработчике, как-то так.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы