This package allows you to manage a loading state inside all component, and to display a progressbar (thanks to vue-progressbar) to show the global loading state of your app.
All components have their own loading state, but the progressbar show the global loading state of all components.
npm install vue-component-loading
import VueLoading from 'vue-component-loading'
let config = {
progressBar:{
color: '#000',
failedColor: '#874b4b',
thickness: '5px',
transition: {
speed: '0.2s',
opacity: '0.6s',
termination: 300
},
}
}
Vue.use(VueLoading, config);See progressbar doc for all options for the progressbar
First, register your progressbar :
<template>
<vue-loading-component />
<router-view></router-view>
</template>You can use these methods inside a component to manage its loading state
this.startLoading(); // --> this.loading = true : the component starts to load, the progressbar appear
this.endLoading(); // --> this.loading = false : the component end to load, the progressbar progress :p (if it's the last component, it disappear)
this.failLoading(); // --> this.loading = false : show the fail progressbarDepending on the loading state, you can access loading boolean in your component
<template>
<div v-if="!loading">
Component Loaded !
</div>
</template>
<script>
export default {
mounted(){
this.startLoading();
setTimeout(() => {
this.endLoading();
}, 2000)
}
}
</script>