vue-progress-scroll

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

Installing

Get from npm:

1npm i -D vue-progress-scroll

And use this inside your app:

1import Vue from 'vue'
2import App from './App.vue'
3import Progress from 'vue-progress-scroll'
4
5Vue.use(Progress);
6new Vue({
7  el: '#app',
8  render: h => h(App)
9})

And if you want to use from browser, simply :

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

Usage

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

Example:

1<progress-scroll>
2	Here is the article main part.
3	lorem...
4	....
5	...
6	..
7</progress-scroll>

Events

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

1<progress-scroll @complete='runMyMethod'>
2	Here is the article main part.
3	lorem...
4	....
5	...
6	..
7</progress-scroll>

Props

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

1<progress-scroll background='#abfbc6'>
2	Here is the article main part.
3	lorem...
4	....
5	...
6	..
7</progress-scroll>