Skip to content

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

License

Notifications You must be signed in to change notification settings

ajerez/vue-read-progress

Repository files navigation

vue-read-progress

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

NPM version NPM downloads Size twitter donate

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