How to add progress bar laravel vuejs [ Updated 2020 ]

How to add progress bar laravel vuejs [ Updated 2019 ]

How to add progress bar laravel vuejs [ Updated 2020 ]



How to add progress bar laravel vuejs [ Updated 2019 ]





[ads]
Hi guys today we are going to add progress bar just like given above in our Laravel-Vue.js Application. The process is simple and we will be using prograss bar package for this task.



Here is the link to package that we are going to use
[ads]
We are going to add this in our laravel project so use below given “npm” command.





     npm install vue-progressbar --save

[ads]
It should look like this
How to add progress bar laravel vuejs [ Updated 2019 ]



After running command ,This package should be in “Package.json”





How to add progress bar laravel vuejs [ Updated 2019 ]
[ads]
Now add below given code in “resources/app.js”.



      import VueProgressBar from 'vue-progressbar'

      Vue.use(VueProgressBar, {
         color: 'rgb(143, 255, 199)', //normal color for progress bar
         failedColor: 'red', //color for failed progress bar
         height: '2px'. //height of progress bar can be changed here
      })

[ads]
You can change settings in above code as you like. Next we need to add it to page.





      
<template>
//this will display progress bar     
<vue-progress-bar></vue-progress-bar>
</template>

[ads]
After including this we need to define starting of progressbar and stopping of progressbar.So where ever there is any process starts add “start code of progress bar” see example below.



                    this.$Progress.start()       //start code of progress bar
                    axios.post('api/users', {
                        name: this.name,
                        email: this.email,
                        password: this.password
                    })
                    .then(function (response) {
                        console.log(response);
                        this.$Progress.finish()      //finish code for progressbar
                    })
                    .catch(function (error) {
                        console.log(error);
                    });

[ads]
In above code we are sending data “name,email,password”. So before getting values we started progress bar and just before getting response we finished progressbar.





you can do something like this.
For more deep understanding you should check here
[ads]



https://18.191.183.98/2019/04/11/setting-up-laravel-collective-for-first-time/
[ads]