Scroll Indicator Component Using Vue.js

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.

Installation

$ yarn add vue-scroll-indicator --dev
# or ...
$ npm i vue-scroll-indicator --save-dev

Register the component:

import Vue from 'vue';
import { VueScrollIndicator } from 'vue-scroll-indicator';

Vue.component('vue-scroll-indicator', VueScrollIndicator);

Alternatively using Vue.use() to register the component:

import VueScrollIndicator from 'vue-scroll-indicator';

Vue.use(VueScrollIndicator);

Usage

Display the component using default style:

<vue-scroll-indicator></vue-scroll-indicator>

Display the component using custom style:

<vue-scroll-indicator
    height="7px"
    color="#11998e"
    background="none"
>
</vue-scroll-indicator>

Available properties

Prop	Data Type	Required	Default	Description
height	String	false	5px	Scroll indicator height
color	String	false	linear-gradient(to right, #ec008c, #fc6767)	Scroll indicator color
background	String	false	#eaeaea	Scroll indicator background-color

Github

Demo

Download

#vue-js #scroll-indicator #vue-component