https://github.com/val-bubbleflat/vue-component-loading
Vuejs package, allow you to manage a loading state inside all component, and to display a progressbar
https://github.com/val-bubbleflat/vue-component-loading
loading progressbar vue vue-component vue-component-loading vue-loading vue-progressbar vuejs vuejs2
Last synced: 2 months ago
JSON representation
Vuejs package, allow you to manage a loading state inside all component, and to display a progressbar
- Host: GitHub
- URL: https://github.com/val-bubbleflat/vue-component-loading
- Owner: val-bubbleflat
- License: mit
- Created: 2018-02-17T00:20:43.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-02-19T10:44:19.000Z (over 7 years ago)
- Last Synced: 2024-11-03T07:33:22.090Z (7 months ago)
- Topics: loading, progressbar, vue, vue-component, vue-component-loading, vue-loading, vue-progressbar, vuejs, vuejs2
- Language: Vue
- Homepage:
- Size: 7.81 KB
- Stars: 16
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Laravel Component Loading
by [bubbleflat.com]()
This package allows you to manage a loading state inside all component, and to display a progressbar (thanks to [vue-progressbar](https://github.com/hilongjw/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.
## Installation
````
npm install vue-component-loading
````
```javascript
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](https://github.com/hilongjw/vue-progressbar#constructor-options) for all options for the progressbar
## Usage
First, register your progressbar :
```html
```
You can use these methods inside a component to manage its loading state
```javascript
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 progressbar
```
Depending on the loading state, you can access `loading` boolean in your component
## Exemple
```html
Component Loaded !
export default {
mounted(){
this.startLoading();
setTimeout(() => {
this.endLoading();
}, 2000)
}
}
```
## License
[The MIT License](https://opensource.org/licenses/MIT)