Loading Bar Component for Vue.Js
Need Vue 2 Version? Click Here...
Vue Loading Bar is a Youtube like loading bar component for Vue.Js.
- full customizable
- Already, Complete callback event
- Included
.vue
file - well commented code
- doesn't require any javascript libs, except Vue.Js
Include the vue-loading-bar.js to your HTML or web page file, after Vue.Js. Look an example in example.html. And don't forget to include vue-loading-bar.css file when you use this way.
Or
You can import vue-loading-bar.vue to your vue component file like this and process it with your preprocessor.
Now
You can install it via NPM
npm install vue-loading-bar
import loadingBar from './vue-loading-bar.vue';
// Or
var loadingBar = require('./vue-loading-bar.vue');
minimal:
<loading-bar
class="someClass"
id="SomeId"
:progress=10>
</loading-bar>
Full Example:
<loading-bar
class="someClass"
id="someId"
:progress=10
direction="left"
error="true">
</loading-bar>
The vue-loading-bar component will dispatch some events such as,
...
events: {
/**
* Global Loading Callback Event
*
* @event-name loading-bar:{event-name}
*/
// Loading Bar on started
'loading-bar:started': function (){
console.log('started');
this.status = "started";
},
// Loading Bar on loading
'loading-bar:loading': function (){
console.log('loading');
this.status = "loading";
},
// Loading Bar on loaded
'loading-bar:loaded': function (){
console.log('loaded');
this.status = "loaded";
},
// Loading Bar on error
'loading-bar:error': function (){
console.log('error');
this.status = "error";
},
}
Hopefully this can be useful.
Just Contact Me At:
- Email: [email protected]
- Skype Id: bosnaufal254
- twitter: @BosNaufal
MIT Copyright (c) 2016 - forever Naufal Rabbani