Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/BosNaufal/vue-loading-bar
Youtube Like Loading Bar Component for Vue.js
https://github.com/BosNaufal/vue-loading-bar
Last synced: about 2 months ago
JSON representation
Youtube Like Loading Bar Component for Vue.js
- Host: GitHub
- URL: https://github.com/BosNaufal/vue-loading-bar
- Owner: BosNaufal
- License: mit
- Created: 2016-01-29T15:09:56.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2016-10-21T19:13:51.000Z (about 8 years ago)
- Last Synced: 2024-10-20T03:38:57.317Z (about 2 months ago)
- Language: JavaScript
- Size: 175 KB
- Stars: 139
- Watchers: 4
- Forks: 19
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vue-cn - vue-loading-bar ★26
- awesome-indo-projects - Vue Loading Bar - YouTube Like Loading Bar Component for Vue.js. (Vue)
- awesome-indonesia-repo - Vue Loading Bar - YouTube Like Loading Bar Component for Vue.js. (Vue)
- awesome-vietnam-repo - Vue Loading Bar - Youtube Like Loading Bar Component for Vue.js. (Vue)
README
# vue-loading-bar
Loading Bar Component for [Vue.Js](http://vuejs.org)
[DEMO](https://rawgit.com/BosNaufal/vue-loading-bar/master/index.html)
[Need Vue 2 Version? Click Here...](https://github.com/BosNaufal/vue2-loading-bar)
## Intro
Vue Loading Bar is a Youtube like loading bar component for Vue.Js.
## Features
- full customizable
- Already, Complete callback event
- Included `.vue` file
- well commented code
- doesn't require any javascript libs, except [Vue.Js](http://vuejs.org)
## Install
Include the [vue-loading-bar.js](./vue-loading-bar.js) to your HTML or web page file, after [Vue.Js](http://vuejs.org). Look an example in [example.html](./example.html). And don't forget to include [vue-loading-bar.css](./vue-loading-bar.css) file when you use this way.
Or
You can import [vue-loading-bar.vue](./vue-loading-bar.vue) to your vue component file like [this](./vueku.js) and process it with your preprocessor.
Now
You can install it via NPM
```bash
npm install vue-loading-bar
```
## Import Module
```javascript
import loadingBar from './vue-loading-bar.vue';
// Or
var loadingBar = require('./vue-loading-bar.vue');
```
## Usage
minimal:
```html
```
Full Example:
```html
```
## Props
##### `progress` (*) : The Percentage of loading-bar component. Integer value ( ex: 100 ).
##### `direction` : The Direction of loading-bar component. The default value is "right".
##### `error` : Boolean value to force error state of loading bar.
##### `class` : Component Class (optional)
##### `id` : Component Id (optional)
## Callback Events
The [vue-loading-bar](https://github.com/BosNaufal/vue-loading-bar) component will dispatch some events such as,
```javascript
...
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";
},
}
```
## Thank You for Making this useful~
Hopefully this can be useful.
## Let's talk about some projects with me
Just Contact Me At:
- Email: [[email protected]](mailto:[email protected])
- Skype Id: bosnaufal254
- twitter: [@BosNaufal](https://twitter.com/BosNaufal)
## License
[MIT](http://opensource.org/licenses/MIT)
Copyright (c) 2016 - forever Naufal Rabbani