Neurotoxin Powered Marketing

    @guillaumebriday/vue-scroll-progress-bar

    1.0.0 • Public • Published

    vue-scroll-progress-bar

    Donate Netlify Status

    Getting started

    Install

    $ npm install @guillaumebriday/vue-scroll-progress-bar --save

    or

    $ yarn add @guillaumebriday/vue-scroll-progress-bar

    Install the plugin into Vue:

    import Vue from 'vue'
    import VueScrollProgressBar from '@guillaumebriday/vue-scroll-progress-bar'
    
    Vue.use(VueScrollProgressBar)

    Or use the component directly:

    import { VueScrollProgressBar } from '@guillaumebriday/vue-scroll-progress-bar'
    
    export default {
      components: {
        VueScrollProgressBar
      },
    
      // ...
    }

    Basic Usage

    <template>
      <vue-scroll-progress-bar @complete="handleComplete" height="2rem" />
    </template>

    Props

    key description default
    height Height of the progress bar '.5rem'
    backgroundColor Background property of the progress bar 'linear-gradient(to right, #38C172, #51D88A)'
    barClass Class attribute of the progress bar '{}'
    containerColor Background property of the progress bar container 'transparent'
    zIndex z-index property of the progress bar container '50'
    containerClass Class attribute of the progress bar container '{"progress-bar-container--container": true}'

    With :

    .progress-bar-container--container {
      position: fixed;
      width: 100%;
      top: 0;
      left: 0;
    }

    containerClass must be used to override the .progress-bar-container--container default class. You can use the default :class syntax on the component to add classes if needed.

    Events

    key description
    begin When scroll reached 0%
    complete When scroll reached 100%

    Develop

    Project setup

    $ yarn install
    $ yarn build

    Open example app

    $ cd example
    $ yarn
    $ yarn serve

    Lint files

    $ yarn lint

    Contributing

    Do not hesitate to contribute to the project by adapting or adding features ! Bug reports or pull requests are welcome.

    License

    This project is released under the MIT license.

    Keywords

    none

    Install

    npm i @guillaumebriday/vue-scroll-progress-bar

    DownloadsWeekly Downloads

    169

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    79.5 kB

    Total Files

    14

    Last publish

    Collaborators

    • guillaumebriday