UNPKG

vue2-loading-bar

Version:

Youtube Like Loading Bar Component for Vue 2

70 lines (49 loc) 1.77 kB
# 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 <loading-bar id="loading-bar-id" custom-class="custom-class" :on-error-done="errorDone" :on-progress-done="progressDone" :progress="progress" :direction="direction" :error="error" > </loading-bar> ``` ## 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: [bosnaufalemail@gmail.com](mailto:bosnaufalemail@gmail.com) - Skype Id: bosnaufal254 - twitter: [@BosNaufal](https://twitter.com/BosNaufal) ## License [MIT](http://opensource.org/licenses/MIT) Copyright (c) 2016 - forever Naufal Rabbani