vue-scroll-progress-bar
Getting started
Install
$ 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
},
// ...
}
Basic Usage
<template>
<vue-scroll-progress-bar @complete="handleComplete" height="2rem" />
</template>
Props
| 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.
Events
| key | description |
|---|---|
begin |
When scroll reached 0% |
complete |
When scroll reached 100% |
Develop
Project setup
$ yarn install
$ yarn build
Open example app
$ cd example
$ yarn
$ yarn serve
Lint files
$ yarn lint
Contributing
Do not hesitate to contribute to the project by adapting or adding features ! Bug reports or pull requests are welcome.
License
This project is released under the MIT license.
![[Vue warn]: Property or method](https://avatars.githubusercontent.com/u/20380566?v=4)
84 Nov 24, 2022
96 Jul 20, 2022
0 Nov 21, 2021
3 Aug 1, 2022
21 Dec 2, 2022
155 Oct 19, 2022
235 Dec 26, 2022
10 Jan 5, 2022
183 Nov 17, 2022
534 Dec 2, 2022
57 Mar 2, 2022
30 Dec 7, 2022
16 Dec 30, 2022
119 Nov 28, 2022
17 Oct 27, 2022
50 Jun 25, 2021
1 Oct 4, 2018