Vue-scroll-progressbar NPM

vue-scroll-progressbar

Getting started

Install

$ npm install vue-scroll-progressbar --save

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

Basic Usage

<template>
  <div id="app">
    <vue-scroll-progress-bar @complete="handleComplete" height="2rem" />
  </div>
</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.