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 $ 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';
Vue.use(VueScrollIndicator);
2. Add a basic reading progress bar to the template.
<vue-scroll-indicator></vue-scroll-indicator>
3. Configure the reading progress bar with the following props.
<vue-scroll-indicator height="5px" color="linear-gradient(to right, #ec008c, #fc6767)" background="#eaeaea" > </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 |
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.
