Scroll Indicator Reading Progress Bar Component Using Vue.js

Vue scroll indicator is a component of Vue.js to create a top reading progress bar that updates automatically as you scroll down/up in a web application.

javascript reading progress bar, reading progress bar html, reading position indicator, page progress indicator

How to make use of it:

Install and download:

# Yarn
$ yarn add vue-scroll-indicator

$ npm install vue-scroll-indicator --save

1. Install and import the vue scroll pointer 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. Configure the reading progress bar with the following props.

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

Available properties

PropData TypeRequiredDefaultDescription
heightStringfalse5pxScroll indicator height
colorStringfalselinear-gradient(to right, #ec008c, #fc6767)Scroll indicator color
backgroundStringfalse#eaeaeaScroll indicator background-color

top reading progress bar, vue scroll indicator Plugin/Github

See Demo And Download

Official Website(robbinjohansson): Click Here

This superior jQuery/javascript plugin is developed by robbinjohansson. For extra advanced usage, please go to the official website.

Related Posts


Adding Zoom-on-Wheel and Pan-on-Drag to Inline SVG Elements

Vanilla-js module for adding zoom and panning behavior when dragging to SVG embedded elements. A lightweight Vanilla JavaScript plugin that enables zoom and pan functions on an…


Sorting HTML Table Vanilla JavaScript Library | Sortable.js

Sortable – Small JS vanilla table sorter makes any table with class = “sortable“, er, sortable. That is, the user can click the table header and change…


WYSIWYG Rich Text Editor With jQuery And FontAwesome | RichText

RichText jQuery implementation for WYSIWYG Rich Text Editor which uses Font Awesome Iconic Font for editor icons. It is licensed under AGPL-3.0. Initialize editor Simply call .richText() on your jQuery(‘textarea’) or jQuery(‘input’)…


[Autocomplete] Email Domain Suggestions Like Gmail, Outlook, or More | email-genie

Email Genie allows auto-completion in the email field by providing a list of domain suggestions (,, etc.). This package is lightweight, flexible, compatible with libraries (jQuery,…


[Generator] JavaScript Library for Creating Squircley Magic ✨ | squircley.js

squircley.js is the core magic of Squirclular ✨ from wrapped in a simple 0-dependency JavaScript library. squircley.js can generate SVG files, add square backgrounds to DOM…