Vue Progressbar

By ukmodak | May 18th 2022 09:26:00 AM | viewed 301 times

Run the following command:

  npm install vue-progressbar

Add Following code in the location:\resources\js\app.js

import VueProgressBar from "vue-progressbar"

const options = {
  color: '#0000CD',
  failedColor: '#874b4b',
  thickness: '5px',
  transition: {
    speed: '0.2s',
    opacity: '0.6s',
    termination: 300
  },
  autoRevert: true,
  location: 'top',
  inverse: false
}


Vue.use(VueProgressBar, options)

Create a page ProgressBarBlock.vue in the location:\resources\js\components\block and to Inventory Layout(follow layout tutorial)

<template>
        <vue-progress-bar>
</template>

<script>
export default {
  mounted () {
            //  [App.vue specific] When App.vue is finish loading finish the progress bar
    this.$Progress.finish()
  },
  created () {
           //  [App.vue specific] When App.vue is first loaded start the progress bar
    this.$Progress.start()
           //  hook the progress bar to start before we move router-view
    this.$router.beforeEach((to, from, next) => {
              //  does the page we want to go to have a meta.progress object
      if (to.meta.progress !== undefined) {
        let meta = to.meta.progress
             // parse meta tags
        this.$Progress.parseMeta(meta)
      }
           //  start the progress bar
      this.$Progress.start()
           //  continue to next page
      next()
    })
          //  hook the progress bar to finish after we've finished moving router-view
    this.$router.afterEach((to, from) => {
          //  finish the progress bar
      this.$Progress.finish()
    })
  }
}
</script>

bONEandALL
Visitor

Total : 18980

Today :9

Today Visit Country :

  • Germany
  • Singapore
  • United States
  • Russia