How to see the completion of loading the progress bar?

Question

Vue.js

I looked at options for creating bars in JS on the Internet and did not understand anything)
Therefore, I wrote my simple bicycle:
A component with a bar from bootstrap that takes data from props

<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>

Show component until progress is 100:

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

At the end of the methods I fill in the progress

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

And I show the content as a condition after all the fetches

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

And in this way the bar is filled up to 100 (evenly distributed by methods) and after the fetch the content is drawn. But I do not have time to see the download - it breaks off in half. And it looks ugly. Not like on other sites) For them, even if the data is loaded, the bar completes its visual loading. And then it just disappears. Some kind of delay? I don't understand how to do it. I know that you will now advise graduating from a university / school / army, but still - is it possible in some simple way (for example, in my example) to complete the loading of the bar and not immediately cut down the bar after loading the content? I will be grateful for the info.

Answer 1

To see the completion of the progress bar animation, it must be removed by the transitionend event. Add a separate variable that will be responsible for displaying the progress bar, and change it in the corresponding handler, something like this .