Simple Vue.js plugin for page scroll progress bar
npm i vue-scroll-progress --saveyarn add vue-scroll-progress// YourComponent.vue or main.js for global usage
import Vue from "vue";
import VueScrollProgress from "vue-scroll-progress";
Vue.use(VueScrollProgress);<!-- .vue template -->
<template>
<VueScrollProgress></VueScrollProgress>
</template><style>
/* play with some lines below */
#progress-container-el {
/* background */
background-color: transparent !important;
top: calc(100% - 4px) !important; /* remove if Vue 3.x */
}
#progress-el {
/* progress bar */
background-color: red !important;
}
</style>