vsp

vue-scroll-progress

πŸŽ‰ Page scroll progress bar component for @vuejs

Showing:

Popularity

Downloads/wk

54

GitHub Stars

87

Maintenance

Last Commit

6mos ago

Contributors

2

Package

Dependencies

1

Size (min+gzip)

0.6KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

vue-scroll-progress πŸŽ‰

Simple Vue.js plugin for page scroll progress bar

vue2 Version Gzipsize Awesome License Hits stargazers

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)

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100