vue-scroll-progress's Introduction

vue-scroll-progress 🎉

Simple Vue.js plugin for page scroll progress bar

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)

vue-scroll-progress's People

Contributors

Stargazers

Watchers

vue-scroll-progress's Issues

Progress bar doesn't work on pages that have api loaded content

Hi,

My content comes from CMS via API and scroll-progress is mounted before my content is loaded onto the page.
Are there any options maybe delay the mounting until content is loaded?

Thanks,
Haresh

Height scrolling error

Hi, I used it on my Laravel + Vue project.
Added it for global usage.
It's working, but only when I scroll for 30px maybe.
The height of the page is more than 100vh, but top line goes from 0 to 100% when I scroll for 20-30px.
http://prntscr.com/n2ogqp

Could you help me to understand what's wrong?

Tag position for html element

Hi, also I found out that you add some html tag outside the body tag, that's not nice.

Could you fix it?

vue-scroll-progress not working on vue-cli 3.x

Hi
I try to use this plugin on vue cli 3.0.7

I put my content include one transition and router-view tag inside in my app.vue and set optional style for it...
I build my project, then run it, but anything didn't change in my viewport

so I have a question: does it work on vue 3.x or not?

Recommend Projects

spemer / vue-scroll-progress Goto Github PK