- Notifications
You must be signed in to change notification settings - Fork0
Vuejs package, allow you to manage a loading state inside all component, and to display a progressbar
License
val-bubbleflat/vue-component-loading
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
This package allows you to manage a loading state inside all component, and to display a progressbar (thanks tovue-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-loadingimportVueLoadingfrom'vue-component-loading'letconfig={progressBar:{color:'#000',failedColor:'#874b4b',thickness:'5px',transition:{speed:'0.2s',opacity:'0.6s',termination:300},}}Vue.use(VueLoading,config);
Seeprogressbar 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 appearthis.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 progressbar
Depending on the loading state, you can accessloading boolean in your component
<template><divv-if="!loading"> Component Loaded !</div></template><script>exportdefault{mounted(){this.startLoading();setTimeout(()=>{this.endLoading();},2000)}}</script>
About
Vuejs package, allow you to manage a loading state inside all component, and to display a progressbar
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Uh oh!
There was an error while loading.Please reload this page.