Vue.js plugin for scroll position with a progress bar indicator
https://ajerez.github.io/vue-read-progress/
npm i vue-read-progressyarn add vue-read-progress<template>
<vue-read-progress></vue-read-progress>
<!-- Your page content -->
</template>
<script>
import VueReadProgress from "vue-read-progress";
export default {
components: {
VueReadProgress
}
};
</script><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>| 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) |
This project is licensed under the terms of the MIT license