Reading Progressbar Component - vue-progress-scroll

Install & Download:

# NPM
$ npm install vue-progress-scroll --save

vue-progress-scroll is a Vue.js plugin to create a reading progress indicator that auto-updates as you scroll down the page.

1. Install & import the vue-progress-scroll.

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

2. Register the component.

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

3. Use the component in your template.

<progress-scroll>
  Long Content Here
</progress-scroll>

4. Customize the background color of the progress bar.

<progress-scroll background='#222'>
  Long Content Here
</progress-scroll>

5. Execute a function when the reading progress is finished.

<progress-scroll @complete='myFunction'>
  Long Content Here
</progress-scroll>