vue-scroll-progress

Simple Vue.js plugin for page scroll progress bar
4,838 98
vue vuejs plugin javascript library design css button progress js material npm yarn spemer hyouk seo
Install
npm install vue-scroll-progress
Latest Version:1.1.5
Vue:2
License:MIT
Last Updated:Sep 8, 2024
Links: GitHub  ·  npm
Maintainer: spemer

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)

Related Packages

vue-rippler

Simple Vue.js plugin for custom ripple effect

3,148 42
button css design hyouk seo javascript js library material npm plugin +6
vue-kakao-pf

Simple Vue.js plugin for Kakao plus friend chat

1,164 2
button css hyouk seo javascript js library npm plugin spemer vue +7
eos_vue_md_components

A simple set of styled components for Vue JS

492
design js material vue components
simple-shimmer

A pure css simple shimmer like facebook.

1,607 1
css javascript js npm vue facebook node nuxt pure react +2
@porsche-design-system/components-vue

Porsche Design System is a component library designed to help developers create...

32,658 671
design js library vue component porsche system web

Version History

Version Released Vue License
1.1.5 ^2.5.11 MIT
1.1.4 ^2.5.11 MIT
1.1.3 ^2.5.11 MIT
1.1.2 ^2.5.11 MIT
1.1.1 ^2.5.11 MIT