Vue Progress Indicator

Vue.js component for loading indicator

Demo on JSFiddle

Installation

# npm npm install vue-progress-indicator --save  # Yarn yarn add vue-progress-indicator

Usage

• Include plugin in your app.js

import ProgressIndicator from 'vue-progress-indicator'; Vue.use(ProgressIndicator); /* 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

<progress-indicator class="custom-css-classes"></progress-indicator> <!-- You can place multiple progress on same page differentiated by their name --> <progress-indicator class="another-progress" name="login-form"></progress-indicator>

API methods

All api methods accepts an optional parameter, the name of the component.

show()

Makes the loader visible

this.$progress.show(); this.$progress.show('login-form');

hide()

Hides the loader

this.$progress.hide(); this.$progress.hide('login-form');

toggle()

Toggles the loader visibility

this.$progress.toggle(); this.$progress.toggle('login-form');

Install in non-module environments (without webpack)

<!-- Vue js --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script> <!-- Lastly add this package --> <script src="https://cdn.jsdelivr.net/npm/vue-progress-indicator@latest"></script> <link href="https://cdn.jsdelivr.net/npm/vue-progress-indicator@latest/dist/index.min.css" rel="stylesheet"> <!-- Install the global component --> <script> Vue.use(VueProgressIndicator) </script>

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