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-progressyarn
yarn add vue-read-progressUsage
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
