This package has been deprecated

Author message:

Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

vue-progress-indicator

0.0.4 • Public • Published

Vue Progress Indicator

downloads npm-version github-tag license

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/vue@2.5/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

Changelog

Please see CHANGELOG for more information what has changed recently.

TODOs

  • More colors
  • More shapes
  • Tests

License

MIT License

Package Sidebar

Install

npm i vue-progress-indicator

Weekly Downloads

4

Version

0.0.4

License

MIT

Unpacked Size

25.4 kB

Total Files

16

Last publish

Collaborators

  • ankurk91