All Projects → guillaumebriday → Vue Scroll Progress Bar

guillaumebriday / Vue Scroll Progress Bar

Licence: mit
Vue.js plugin for page scroll progress bar

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Vue Scroll Progress Bar

Vue Dragscroll
A vue directive to make a scrollable element scroll by draging to the scroll direction
Stars: ✭ 175 (+130.26%)
Mutual labels:  vuejs2, vue-plugin
Vue2 Scrollbar
The Simplest Pretty Scroll Area Component with custom scrollbar for Vue 2. https://bosnaufal.github.io/vue2-scrollbar
Stars: ✭ 233 (+206.58%)
Mutual labels:  scrollbar, vuejs2
Vuent
🎨 Vue.js components implementing Microsoft Fluent Design
Stars: ✭ 207 (+172.37%)
Mutual labels:  vuejs2, vue-plugin
Vue Awesome Swiper
🏆 Swiper component for @vuejs
Stars: ✭ 12,072 (+15784.21%)
Mutual labels:  vuejs2, vue-plugin
Vuet
允许你定义飙车过程的集中式状态管理模式
Stars: ✭ 430 (+465.79%)
Mutual labels:  vuejs2, vue-plugin
Vue Codemirror
⌨️ @codemirror component for @vuejs
Stars: ✭ 2,115 (+2682.89%)
Mutual labels:  vuejs2, vue-plugin
V Bar
The virtual responsive crossbrowser scrollbar component for VueJS 2x
Stars: ✭ 216 (+184.21%)
Mutual labels:  scrollbar, vuejs2
Vue Emoji Picker
Very simple, yet powerful, vue emoji picker 🎉🔥🚀
Stars: ✭ 218 (+186.84%)
Mutual labels:  vuejs2, vue-plugin
vue-package-template
Boilerplate for your next, ES6 Vue.js package. Ready for npm deployments
Stars: ✭ 12 (-84.21%)
Mutual labels:  npm-package, vue-plugin
Pd Select
vue components ,like ios 3D picker style,vue 3d 选择器组件,3D滚轮
Stars: ✭ 101 (+32.89%)
Mutual labels:  npm-package, vuejs2
Vue Ellipse Progress
A Vue.js component to create beautiful animated circular progress bars
Stars: ✭ 101 (+32.89%)
Mutual labels:  vuejs2, vue-plugin
Vuebar
(🗃️ Archived) Vue 2 directive for custom scrollbar that uses native scroll behavior. Lightweight, performant, customizable and without dependencies. Used successfully in production on https://ggather.com
Stars: ✭ 650 (+755.26%)
Mutual labels:  scrollbar, vuejs2
Vue Toastr
Vuejs Toast : Plugin and Component Capability.
Stars: ✭ 93 (+22.37%)
Mutual labels:  vuejs2, vue-plugin
Vue Chimera
VueJS reactive RESTful API
Stars: ✭ 160 (+110.53%)
Mutual labels:  vuejs2, vue-plugin
Vue Csv Import
Vue.js component to select a CSV file, map the columns to fields, and post it somewhere.
Stars: ✭ 95 (+25%)
Mutual labels:  npm-package, vuejs2
Vue Touch Ripple
👆 Touch ripple component for @vuejs
Stars: ✭ 443 (+482.89%)
Mutual labels:  vuejs2, vue-plugin
Vue Quill Editor
🍡@quilljs editor component for @vuejs
Stars: ✭ 6,874 (+8944.74%)
Mutual labels:  vuejs2, vue-plugin
Http Vue Loader
load .vue files from your html/js
Stars: ✭ 1,172 (+1442.11%)
Mutual labels:  vuejs2
Vue Numeral Filter
Vue.js filter for Numeral.js 🔢 🔣
Stars: ✭ 73 (-3.95%)
Mutual labels:  vuejs2
Retroprogress
💈 Retro looking progress bar straight from the 90s
Stars: ✭ 71 (-6.58%)
Mutual labels:  progress-bar

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.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].