Reading Progressbar Component – vue-progress-scroll

Description:

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

How to use it:

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>

Preview:

vue-progress-scroll

Download Details:

Author: hosein2398

Live Demo: https://hosein2398.github.io/vue-progress-scroll/

Download Link: https://github.com/hosein2398/vue-progress-scroll/archive/master.zip

Official Website: https://github.com/hosein2398/vue-progress-scroll

Last Update: October 28, 2019

Install:

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

You Might Be Interested In:

Add Comment