Vue Progress Indicator
Vue.js component for loading indicator
JSFiddle
Demo onInstallation
# npm npm install vue-progress-indicator --save # Yarn yarn add vue-progress-indicator
Usage
- Include plugin in your
app.js
;Vue;/*By default plugin will use `progress-indicator` for global component name.You can customize it by providing the parameters.Example: Vue.use(ProgressIndicator,{ componentName: 'awesome-component`}); */
- Place global component in your app template somewhere
<!-- You can place multiple progress on same page differentiated by their name -->
API methods
All api methods accepts an optional parameter, the name of the component.
show()
Makes the loader visible
this$progress;this$progress;
hide()
Hides the loader
this$progress;this$progress;
toggle()
Toggles the loader visibility
this$progress;this$progress;
Install in non-module environments (without webpack)
<!-- Vue js --><!-- Lastly add this package --><!-- Install the global component -->
Browser support
- Modern browsers only
Run examples on your localhost
- Clone this repo
- Make sure you have node-js
>=6.10
and yarn>=1.x
pre-installed - Install dependencies -
yarn install
- Run webpack dev server -
yarn start
- This should open the demo page at
http://localhost:9000
in your default web browser
Thanks
- Materialize CSS for design
Changelog
Please see CHANGELOG for more information what has changed recently.
TODOs
- More colors
- More shapes
- Tests
License
MIT License