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.

Comments

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
  • 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 84 Aug 29, 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 96 Jul 20, 2022
    Very simple page top scroll seek bar with Vue.js

    Very simple page top scroll seek bar with Vue.js

    Akira Kanno 0 Nov 21, 2021
    Vue plugin that provides functionality for remembering scroll position and loaded items in a catalog page after navigating back and forth to a single item page, with customisable options.

    Vue plugin that provides functionality for remembering scroll position and loaded items in a catalog page after navigating back and forth to a single item page, with customisable options.

    Giorgos Sideris 3 Aug 1, 2022
    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 20 Jun 24, 2022
    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 154 Sep 26, 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 223 Sep 9, 2022
    Vue Scroll Show - Showing the element if the user reached it after scroll

    Vue Scroll Show Showing the element if the user reached it after scroll Installation npm i --save-dev vue-scroll-show import VueScrollShow from 'vue-s

    Aleksey Pleshkov 10 Jan 5, 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 184 Aug 4, 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 531 Sep 27, 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 57 Mar 2, 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 531 Sep 27, 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 30 Apr 13, 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 184 Aug 4, 2022
    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 15 Jun 14, 2022
    Lightweight Vue plugin for smooth-scrolling extended from vue-smooth-scroll

    Vue2 Smooth Scroll Lightweight Vue plugin for smooth-scrolling extended from vue-smooth-scroll. For simple use-cases, the native scroll-behavior CSS p

    xlaoyu 119 Aug 22, 2022
    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 16 Sep 16, 2022
    A Vue.JS plugin directive to remember element scroll-position when detached

    A Vue.JS plugin directive to remember element scroll-position when detached Problem If a DOM fragment is removed from the DOM and t

    Mark Hahn 50 Jun 25, 2021
    SkyScroll - A Vue plugin for scroll/resize events and calculations.

    SkyScroll A Vue plugin for scroll/resize events and calculations. Description This plugin exposes a handful of useful properties on all Vue instances,

    Limbo (formerly Skybrud) 1 Oct 4, 2018