Package Exports

vue-scroll-progress

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-scroll-progress) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

vue-scroll-progress 🎉

Simple Vue.js plugin for page scroll progress bar

Live Demo

Installation

npm i vue-scroll-progress --save

yarn add vue-scroll-progress

CDNs

jsDelivr, UNPKG, bundle.run

Usage

main.js

// YourComponent.vue or main.js for global usage
import Vue from "vue";
import VueScrollProgress from "vue-scroll-progress";

Vue.use(VueScrollProgress);

Use in component

<!-- .vue template -->
<template>
  <VueScrollProgress></VueScrollProgress>
</template>

Set progress bar style, and customize as you want(Optional)

<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>

Author

Hyouk Seo(Spemer)