Awesome

vue-scroll-progress-bar

Getting started

Install

$ npm install @guillaumebriday/vue-scroll-progress-bar --save

$ 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.