Vue.js plugin for page scroll progress bar

Overview

vue-scroll-progress-bar

Donate Netlify Status

Getting started

Install

$ npm install @guillaumebriday/vue-scroll-progress-bar --save

or

$ yarn add @guillaumebriday/vue-scroll-progress-bar

Install the plugin into Vue:

import Vue from 'vue'
import VueScrollProgressBar from '@guillaumebriday/vue-scroll-progress-bar'

Vue.use(VueScrollProgressBar)

Or use the component directly:

import { VueScrollProgressBar } from '@guillaumebriday/vue-scroll-progress-bar'

export default {
  components: {
    VueScrollProgressBar
  },

  // ...
}

Basic Usage

<template>
  <vue-scroll-progress-bar @complete="handleComplete" height="2rem" />
</template>

Props

key description default
height Height of the progress bar '.5rem'
backgroundColor Background property of the progress bar 'linear-gradient(to right, #38C172, #51D88A)'
barClass Class attribute of the progress bar '{}'
containerColor Background property of the progress bar container 'transparent'
zIndex z-index property of the progress bar container '50'
containerClass Class attribute of the progress bar container '{"progress-bar-container--container": true}'

With :

.progress-bar-container--container {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
}

containerClass must be used to override the .progress-bar-container--container default class. You can use the default :class syntax on the component to add classes if needed.

Events

key description
begin When scroll reached 0%
complete When scroll reached 100%

Develop

Project setup

$ yarn install
$ yarn build

Open example app

$ cd example
$ yarn
$ yarn serve

Lint files

$ yarn lint

Contributing

Do not hesitate to contribute to the project by adapting or adding features ! Bug reports or pull requests are welcome.

License

This project is released under the MIT license.

Issues

Renovate configuration

:date: Schedule: "before 3am on the first day of the month" (UTC).

:vertical_traffic_light: Automerge: Disabled by config. Please merge this manually once you are satisfied.

:recycle: Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

:no_bell: Ignore: Close this PR and you won't be reminded about this update again.


  • [ ] If you want to rebase/retry this PR, check this box

This PR has been generated by WhiteSource Renovate. View repository job log here.

opened by renovate[bot] 0
  • Bump acorn from 6.3.0 to 6.4.1 in /examples

    Bump acorn from 6.3.0 to 6.4.1 in /examples

    Bumps acorn from 6.3.0 to 6.4.1.

    Commits
    • 9a2e9b6 Mark version 6.4.1
    • 90a9548 More rigorously check surrogate pairs in regexp validator
    • df0cf1a Mark version 6.4.0
    • 5303412 Also export Parser via Parser.acorn
    • efe273e give token types and etc to plugins
    • See full diff in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump websocket-extensions from 0.1.3 to 0.1.4 in /examples

    Bump websocket-extensions from 0.1.3 to 0.1.4 in /examples

    Bumps websocket-extensions from 0.1.3 to 0.1.4.

    Changelog

    Sourced from websocket-extensions's changelog.

    0.1.4 / 2020-06-02

    • Remove a ReDoS vulnerability in the header parser (CVE-2020-7662, reported by Robert McLaughlin)
    • Change license from MIT to Apache 2.0
    Commits
    • 8efd0cd Bump version to 0.1.4
    • 3dad4ad Remove ReDoS vulnerability in the Sec-WebSocket-Extensions header parser
    • 4a76c75 Add Node versions 13 and 14 on Travis
    • 44a677a Formatting change: {...} should have spaces inside the braces
    • f6c50ab Let npm reformat package.json
    • 2d211f3 Change markdown formatting of docs.
    • 0b62083 Update Travis target versions.
    • 729a465 Switch license to Apache 2.0.
    • See full diff in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump elliptic from 6.5.1 to 6.5.3 in /examples

    Bump elliptic from 6.5.1 to 6.5.3 in /examples

    Bumps elliptic from 6.5.1 to 6.5.3.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • new functionality - DOM selector handler

    new functionality - DOM selector handler

    Hello, I really like your plugin, however I would like to ask you to add new functionality. Could you add the option of adding a handler on a given DOM element? I would like to use your plugin on the blog, and the scrollbar position to refer to the article text, but when the page has article, sidebar and footer then the scrollbar measures the entire page, not what the user is interested in - the length of the article. For e.g.

    <vue-scroll-progress-bar handler=".post-article" @complete="handleComplete" height="2rem" />

    I think this is a nice option. Hold on!

    opened by J4si3k 4
  • Allow custom vertical offset of progress bar

    Allow custom vertical offset of progress bar

    In certain situations, there may be a large header or other element that you would want to exclude from the height calculation. I'd like to be able to pass a reference to an element and have the progress bar calculate it's width and only become visible after that referenced element is outside of the viewport.

    Will submit a PR for this soon.

    opened by rasliche 0
  • Develop

    Develop

    – Implement update event – Implement updating component after window.resize event – Implement onClick component prop

    enhancement 
    opened by dasnein 2
  • Releases(v1.0.0)
    Owner
    Guillaume Briday
    Developer passionate about the Web who loves Ruby 💎, Rails 🛤 and Stimulus.
    Guillaume Briday
    Vue.js plugin for page scroll progress bar

    vue-scroll-progress-bar Getting started Install $ npm install @guillaumebriday/vue-scroll-progress-bar --save or $ yarn add @guillaumebriday/vue-scrol

    Guillaume Briday 82 Jan 2, 2022
    🎉 Page scroll progress bar component for @vuejs

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

    Hyouk Seo 92 Dec 28, 2021
    Vue Snakke allows you to add a reading progress bar to your Vue 3 project.

    Vue 3 utility that enables you to track page scrolling progress.

    Vinicius Kiatkoski Neves 14 Dec 8, 2021
    A sigle-page scroll plugin based on [email protected],support for mobile and PC .

    fullpage-vue A sigle-page scroll plugin based on [email protected],support for mobile and PC . 中文版 overview To achieve sigle-page scroll in mobile, support hori

    abelTO 150 Jan 19, 2022
    A vue directive to make a scrollable element scroll by draging to the scroll direction

    vue-dragscroll vue-dragscroll is a micro vue.js directive which enables scrolling via holding the mouse button ("drag and drop" or "click and hold" st

    null 208 Jan 17, 2022
    A Back-to-top component for Vue.js, which scroll page to the top when clicked

    Vue Backtotop Component A Back-to-top component for Vue.js, which scroll page to the top when clicked Demo See demo. Install via npm npm install vue-b

    Caio Fernandes 182 Dec 10, 2021
    Lightweight and simple to use vue component that highlights menu items as you scroll the page, also scrolling to target section when clicked.

    vue-scrollactive This component makes it simple to highlight a menu item with an 'active' class as you scroll. Highlights items with a class as you sc

    Mauricio Farias Dziedzinski 510 Jan 12, 2022
    Lightweight package for highlighting menu items as you scroll the page, also scrolling to target section when item clicked. Use as a vue component/directive or in vanilla js.

    navscroll-js Installation This package is available on npm. Using npm: npm install --save navscroll Using yarn: yarn add navscroll Directly include it

    Honoré Nintunze 56 Jan 17, 2022
    Lightweight and simple to use vue component that highlights menu items as you scroll the page, also scrolling to target section when clicked.

    vue-scrollactive This component makes it simple to highlight a menu item with an 'active' class as you scroll. Highlights items with a class as you sc

    Mauricio Farias Dziedzinski 512 Jan 20, 2022
    Scroll to page top button, Vue.js component.

    vue-go-top Scroll to page top button, Vue.js component. Demo Demo Install Browser <script src="vue.js"></script> <script src="vue-go-top.min.js"></scr

    null 29 Sep 5, 2021
    A Back-to-top component for Vue.js, which scroll page to the top when clicked

    Vue Backtotop Component A Back-to-top component for Vue.js, which scroll page to the top when clicked Demo See demo. Install via npm npm install vue-b

    Caio Fernandes 182 Dec 10, 2021
    nuxt-fullpage is a nuxt module for creating fullscreen page scroll fast and simple.

    Nuxt fullpage Nuxt module for creating fullscreen page scroll fast and simple. Demo online Table of contents Installation Usage Options Contributing I

    Open Source Afghanistan 14 Dec 17, 2021
    A simple scroll picker plugin for Vue 3

    vue3-scroll-picker Vue 3 scroll picker plugin. Demo Demo Demo Code Install yarn add vue3-scroll-picker npm i --save vue3-scroll-picker Register Global

    HJ 14 Dec 20, 2021
    Top bar indicating amount of content scrolled

    Scrol indicator for vue.js apps Demo See DEMO here Install Run npm install vue-content-scroll-progress --save Usage Add in the component import MyScro

    Mikhail Kuznetcov 26 Jul 20, 2021
    The Simplest Scroll Area Component with custom scrollbar for Vue Js. https://bosnaufal.github.io/vue-scrollbar/

    Vue Scrollbar The Simplest Scroll Area Component with custom scrollbar for Vue Js. All animation, Height and Width are pure CSS, So it's TOTALLY CUSTO

    Naufal Rabbani 117 Jan 18, 2022
    Vue-loadmore - A pull-down refresh and pull-up loadmore scroll component for Vue.js

    vuejs-loadmore A pull-down refresh and pull-up loadmore scroll component for Vue

    staticdeng 32 Jan 8, 2022
    A Vue component that syncronize containers scroll positions

    vue-scroll-sync A Vue component that syncronize containers scroll positions Installation npm i --save vue-scroll-sync Browser Include the script file,

    null 23 Jan 11, 2022
    A Vue.js directive for body scroll locking without breaking scrolling of a target element.

    v-scroll-lock A Vue.js directive for body scroll locking (for iOS Mobile and Tablet, Android, desktop Safari/Chrome/Firefox) without breaking scrollin

    Pete Hegman 171 Dec 10, 2021
    📜 Vue.js + Stroll.js. Awesome CSS list scroll effects for Vue2.x.

    vue-stroll Vue.js + Stroll.js. Awesome CSS list scroll effects for Vue2.x. See Demo Installation npm i vue-stroll -S CDN Use this URL for development

    Yunwei Xiao 155 Dec 28, 2021