Vue vue-progressbar

by kabanoki

HTML

<script src="https://cdn.jsdelivr.net/npm/vue-progressbar/dist/vue-progressbar.min.js"></script>
<div id="app">
    <button @click="Progress">
    Progress
    </button>
    <vue-progress-bar></vue-progress-bar>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>

CSS

p, div {
  padding: 1px;
}

Vue

Vue.use(window.VueProgressBar);

var app = new Vue({
  methods: {
  	Progress: function()
    {
      this.$Progress.start();
      var self = this;
      setTimeout(function(){
         self.$Progress.finish();
      },1000);
    }
  },
  mounted () {
    this.$Progress.finish()
  },
  created () {
    this.$Progress.start()
    this.$router.beforeEach((to, from, next) => {
      if (to.meta.progress !== undefined) {
        let meta = to.meta.progress
        this.$Progress.parseMeta(meta)
      }
      this.$Progress.start()
      next()
    })
    this.$router.afterEach((to, from) => {
      this.$Progress.finish()
    })
  }
}).$mount('#app')