ajerez / vue-read-progress

Customizable progress bar at the top of the page that shows the scroll progress

vue-read-progress

Vue.js plugin for scroll position with a progress bar indicator

Demo

https://ajerez.github.io/vue-read-progress/

Installation

With npm (Recommended)

npm i vue-read-progress

yarn

yarn add vue-read-progress

Usage

Default style

<template>
  <vue-read-progress></vue-read-progress>
  <!-- Your page content -->
</template>

<script>
  import VueReadProgress from "vue-read-progress";

  export default {
    components: {
      VueReadProgress
    }
  };
</script>

Customizing the Look and Feel

<template>
  <vue-read-progress color="#32AAEA" opacity="0.5" height="10px" :shadow="true"></vue-read-progress>
  <!-- Your page content -->
</template>

<script>
  import VueReadProgress from "vue-read-progress";

  export default {
    components: {
      VueReadProgress
    }
  };
</script>

Gridsome (SSR) (https://gridsome.org/)

<template>
  <ClientOnly>
    <read-progress></read-progress>
  </ClientOnly>
  <!-- Your page content -->
</template>

<script>
  export default {
    components: {
      ReadProgress: () =>
        import ('vue-read-progress')
        .then(m => m.default)
        .catch()
    }
  };
</script>

Available Options (All optional)

Property	Type	Default value	Prop Description
height	String	4px	Height of progress bar (optional)
color	String	#506888	Color of progress bar (optional)
opacity	[String, Number]	1	Set opacity values from 0 to 1 (optional)
shadow	Boolean	false	Enable box-shadow for the progress bar (optional)

License

This project is licensed under the terms of the MIT license