$ npm install vue-scroll-progressbar --save
or
$ yarn add vue-scroll-progressbar
Install the plugin into Vue:
import Vue from 'vue'
import VueScrollProgressBar from 'vue-scroll-progressbar'
Vue.use(VueScrollProgressBar)
Or use the component directly:
import Vue from 'vue'
import VueScrollProgressBar from 'vue-scroll-progressbar'
Vue.component("vue-scroll-progress-bar", VueScrollProgressBar)
<template>
<div id="app">
<vue-scroll-progress-bar @complete="handleComplete" height="2rem" />
</div>
</template>
key | description | default |
---|---|---|
height |
Height of the progress bar | '.5rem' |
backgroundColor |
Background property of the progress bar | 'linear-gradient(to right, #38C172, #51D88A)' |
barClass |
Class attribute of the progress bar | '{}' |
containerColor |
Background property of the progress bar container | 'transparent' |
zIndex |
z-index property of the progress bar container | '50' |
containerClass |
Class attribute of the progress bar container | '{"progress-bar-container--container": true}' |
With :
.progress-bar-container--container {
position: fixed;
width: 100%;
top: 0;
left: 0;
}
containerClass
must be used to override the .progress-bar-container--container
default class. You can use the default :class
syntax on the component to add classes if needed.
key | description |
---|---|
begin |
When scroll reached 0% |
complete |
When scroll reached 100% |
$ cd examples
$ yarn install
$ yarn run serve
$ yarn run build
$ yarn run test
$ yarn run lint
Do not hesitate to contribute to the project by adapting or adding features ! Bug reports or pull requests are welcome.
This project is released under the MIT license.