vue-progress-scroll

Tiny Vue plugin to show a progress bar while user is reading an article or …

Step 1: Installation

Get it from npm:

npm i -D vue-progress-scroll

Step 2: Import it

And use this inside your app:

import Vue from 'vue'
import App from './App.vue'
import Progress from 'vue-progress-scroll'

Vue.use(Progress);
new Vue({
  el: '#app',
  render: h => h(App)
})

And if you want to use from browser, simply :

<script src='./vue-progress-scroll.js'></script>

Step 3: Usage

Usage is really simple, just put the content inside progress-scroll tag.

Example:

<progress-scroll>
    Here is the article main part.
    lorem...
    ....
    ...
    ..
</progress-scroll>

Events

vue-progress-scroll fires complete event when you reach end of scroll. Example:

<progress-scroll @complete='runMyMethod'>
    Here is the article main part.
    lorem...
    ....
    ...
    ..
</progress-scroll>

Props

There is a background prop which defines the background color of bar:

<progress-scroll background='#abfbc6'>
    Here is the article main part.
    lorem...
    ....
    ...
    ..
</progress-scroll>

Reference

Below are the reference links: