guillaumebriday / Vue Scroll Progress Bar
Licence: mit
Vue.js plugin for page scroll progress bar
Stars: ✭ 76
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
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 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
Retroprogress
💈 Retro looking progress bar straight from the 90s
Stars: ✭ 71 (-6.58%)
Mutual labels: progress-bar
vue-scroll-progress-bar
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].