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

    Install

    npm i vue-progress-indicator

    DownloadsWeekly Downloads

    17

    Version

    0.0.4

    License

    MIT

    Unpacked Size

    25.4 kB

    Total Files

    16

    Last publish

    Collaborators

    • ankurk91