vueprogressionbar

Vue Progression Bar

Progression bar shows how much the user scrolled (progressed) from the beginning of the page.

Installation

To install this package, use npm:

npm i vueprogressionbar --save

Usage

Default example:

<template>
  <div id="app">
    <ProgressBar/>
  </div>
</template>

<script>

import ProgressBar from 'vueprogressionbar'
export default {
  name: 'App',
  components: {
    ProgressBar
  }
}
</script>

Options

There are 3 options you can chose from:

• Option 1: rounded - rounded bar edges (false by default)

 <ProgressBar rounded/>

• Option 2: size (medium by default):

 <ProgressBar size="[small-big]"/>

small (5px height) medium (7px) big (10px)

• Option 3: color (blueish by default - #76ceff) Ex:

 <ProgressBar color="red"/>

Gif example