Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/BosNaufal/vue2-loading-bar
Simplest Youtube Like Loading Bar Component For Vue 2. http://bosnaufal.github.io/vue2-loading-bar/
https://github.com/BosNaufal/vue2-loading-bar
Last synced: about 1 month ago
JSON representation
Simplest Youtube Like Loading Bar Component For Vue 2. http://bosnaufal.github.io/vue2-loading-bar/
- Host: GitHub
- URL: https://github.com/BosNaufal/vue2-loading-bar
- Owner: BosNaufal
- License: mit
- Created: 2016-10-20T02:18:43.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2017-01-12T14:05:03.000Z (almost 8 years ago)
- Last Synced: 2024-10-31T07:49:23.961Z (about 1 month ago)
- Language: JavaScript
- Size: 89.8 KB
- Stars: 269
- Watchers: 7
- Forks: 38
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-indo-projects - Vue 2 Loading Bar - Simplest YouTube Like Loading Bar Component For Vue 2. (Vue)
- awesome-indonesia-repo - Vue 2 Loading Bar - Simplest YouTube Like Loading Bar Component For Vue 2. (Vue)
- awesome-github-vue - vue2-loading-bar - 最简单的仿Youtube加载条视图 (UI组件)
- awesome-vietnam-repo - Vue 2 Loading Bar - Simplest Youtube Like Loading Bar Component For Vue 2. (Vue)
- awesome - vue2-loading-bar - 最简单的仿Youtube加载条视图 (UI组件)
- awesome-vue - vue2-loading-bar - loading-bar?style=social) - 最简单的仿Youtube加载条视图 (UI组件)
- awesome-github-vue - vue2-loading-bar - 最简单的仿Youtube加载条视图 (UI组件)
README
# Vue 2 Loading Bar
Simplest Youtube Like Loading Bar Component For [Vue 2](http://vuejs.org/)
[DEMO](https://bosnaufal.github.io/vue2-loading-bar)
## Install
You can import [vue2-loading-bar](./src/js/components/index.js) to your vue component file like [this](./src/js/App.js) and process it with your preprocessor.
or
You can install it via NPM
```bash
npm install vue2-loading-bar
```
or
just include [vue2-loading-bar.min.js](./build/vue2-loading-bar.min.js) to your view like [this](./index.html)
## Usage
In Your HTML:
```html
```
## Props
##### id (String)
custom Id in vue2-loading-bar component
##### customClass (String)
custom className in vue2-loading-bar component
##### progress (Number)
The Progress Percentage of vue2-loading-bar component
##### direction (String)
The Animation Direction of vue2-loading-bar component. You can fill it with `'right'` or `'left'` default is `'right'`
##### error (Boolean)
Indicate the component to showing the error state.
##### onErrorDone (Function, required)
Should change the parent state when the loading-bar has finished with its error state
##### onProgressDone (Function, required)
Should netralize the parent's progress state to be `0`
## Thank You for Making this 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