Top Reading Progress Bar – vue-scroll-indicator

A Vue.js component to generate a top reading progress bar that auto-updates as you scroll down/up the web app.

How to use it:

1. Install and import the vue-scroll-indicator component.

import Vue from 'vue';
import { VueScrollIndicator } from 'vue-scroll-indicator';
Vue.component('vue-scroll-indicator', VueScrollIndicator);

// or
import VueScrollIndicator from 'vue-scroll-indicator';

2. Add a basic reading progress bar to the template.


3. Config the reading progress bar with the following props.

  color="linear-gradient(to right, #ec008c, #fc6767)"

Download Details:

Author: robbinworks

Live Demo:

Download Link:

Official Website:

Install & Download:

# Yarn
$ yarn add vue-scroll-indicator

$ npm install vue-scroll-indicator --save

Add Comment