$ npm install @guillaumebriday/vue-scroll-progress-bar --save
or
$ yarn add @guillaumebriday/vue-scroll-progress-bar
Install the plugin into Vue:
import Vue from 'vue'
import VueScrollProgressBar from '@guillaumebriday/vue-scroll-progress-bar'
Vue.use(VueScrollProgressBar)
Or use the component directly:
import { VueScrollProgressBar } from '@guillaumebriday/vue-scroll-progress-bar'
export default {
components: {
VueScrollProgressBar
},
// ...
}
<template>
<vue-scroll-progress-bar @complete="handleComplete" height="2rem" />
</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% |
$ yarn install
$ yarn build
$ cd example
$ yarn
$ yarn serve
$ 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.