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 81 Oct 12, 2021
    A scroll to top component for Vue 3

    A scroll to top component for Vue 3

    Willy Hong 4 Aug 26, 2021
    Bring your scroll game to the next level!

    VueNextLevelScroll - Bring your scroll game to the next level! "Click to scroll" component using the modern Browser API. ?? Features Just one tiny fil

    Developmint GbR 49 Mar 2, 2021
    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 167 Oct 12, 2021
    Vue3.0 无缝滚动组件

    vue3-seamless-scroll Vue3.0 无缝滚动组件 目前组件支持上下左右无缝滚动,单步滚动,并且支持复杂图标的无缝滚动,组件支持原生 css3动画 滚动,目前组件支持平台与Vue3.0支持平台一致。 效果展示 安装 npm npm install vue3-seamless-scr

    null 15 Oct 7, 2021
    Handy floating scrollbar component for Vue 3

    vue-handy-scroll Handy floating scrollbar component for Vue 3. Synopsis vue-handy-scroll is a component that solves the problem of scrolling lengthy c

    null 6 Oct 2, 2021
    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 169 Oct 14, 2021
    Component that customizes the scroll and inserts shadow when scrolling exists

    Vue Scroll Shadow • • Component that customizes the scroll and inserts shadow when scrolling exists Installation NPM npm i vue-scroll-shadow # or yarn

    André Lins 2 Oct 1, 2021
    A super simple Vue component that allows fullscreen and horizontal scroll snapping.

    Vue Scroll Snap A super simple Vue component that allows both fullscreen and horizontal scroll snapping. Showcase Check out the live demo to see the s

    Angelo 26 Oct 12, 2021
    A scroll loading component for vue.js.

    vue-scroll-loader 简体中文 A scroll loading component for vue.js. View demo Browsers Already use IntersectionObserver polyfill compatible with mainstream

    John Wu 57 Sep 30, 2021
    Customize the scrolling position on route navigation. Especially hash mode.

    vue-scroll-behavior Customize the scrolling position on route navigation IE / Edge Firefox Chrome Safari Opera iOS Android IE9+, Edge ✓ ✓ ✓ ✓ ✓ ✓ Tabl

    Yazhe Wang 136 Jul 13, 2021
    Scrollspy for Vue2

    vue2-scrollspy Scrollspy, and animated scroll-to, for Vue2, inspired by vue-scrollspy. See https://ibufu.github.io/vue2-scrollspy/ or Jsfiddle. Instal

    morning 130 Sep 1, 2021
    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 20 Sep 30, 2021
    A Vue.js component to top of the page

    vue-scroll-up Installation Get from npm / yarn: npm i vue-scroll-up yarn add vue-scroll-up or just include vue-scroll-up.js to your view like <script

    Willy Hong 5 Sep 22, 2021
    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 52 Aug 12, 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 494 Oct 12, 2021
    A plugin that checks if element is in viewport

    Check if element is in viewport. Vue.js 2 plugin with SSR support without dependencies. DEMO Simple plugin that checks element position on the screen

    Vasily Timofeev 108 Sep 23, 2021
    A tiny Vue directive that stop propagation scroll when edge reached

    vue-scroll-stop A tiny Vue directive that stop propagation scroll when edge reached. Works with desktop mousewheel and mobile touchmove events ✅ On ❌

    Volodymyr Antoniuk 42 Aug 2, 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 149 Sep 13, 2021