GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → spemer → vue-scroll-progress

spemer / vue-scroll-progress

Licence: MIT license
🎉 Page scroll progress bar component for @vuejs

Programming Languages

shell
77523 projects
javascript
184084 projects - #8 most used programming language

Labels

pluginvuejswebvueprogress-barscroll

Projects that are alternatives of or similar to vue-scroll-progress

Prognroll
A tiny, lightweight jQuery plugin that creates scroll progress bar on the page.
Stars: ✭ 108 (+12.5%)
Mutual labels:  progress-bar, scroll
Core Components
Accessible and lightweight Javascript components
Stars: ✭ 85 (-11.46%)
Mutual labels:  progress-bar, scroll
shell-progressbar
Make a progress bar GUI on terminal platform (Shell script)
Stars: ✭ 39 (-59.37%)
Mutual labels:  progress-bar
vanillajs-scrollspy
ScrollSpy in pure JavaScript
Stars: ✭ 47 (-51.04%)
Mutual labels:  scroll
scroll-sync-react
A scroll syncing library for react that is up to date
Stars: ✭ 49 (-48.96%)
Mutual labels:  scroll
scrollRulerView
请使用 CYRuler （Please use CYRuler）
Stars: ✭ 31 (-67.71%)
Mutual labels:  scroll
progress bar
A simple python progress bar tool to help show your job's progress
Stars: ✭ 20 (-79.17%)
Mutual labels:  progress-bar
Pace
Automatically add a progress bar to your site.
Stars: ✭ 15,368 (+15908.33%)
Mutual labels:  progress-bar
XCArcProgressView
Android开口圆环比例进度View（高仿猎豹清理大师内存占用比例View）
Stars: ✭ 28 (-70.83%)
Mutual labels:  progress-bar
react-shadow-scroll
Component that customizes the list and inserts shadow when scrolling exists
Stars: ✭ 28 (-70.83%)
Mutual labels:  scroll
universalSmoothScroll
A cross-browser smooth-scrolling API which supports multiple and interruptable scroll-animations on all DOM's elements, even at the same time!
Stars: ✭ 46 (-52.08%)
Mutual labels:  scroll
react-auto-scroll
Automatically scroll an element to the bottom
Stars: ✭ 28 (-70.83%)
Mutual labels:  scroll
ConsoleTools
A set of tools and "controls" for the .net Console.
Stars: ✭ 67 (-30.21%)
Mutual labels:  progress-bar
h5-vue-scroller
inspired by iNoBounce, stop your iOS webapp from bouncing around when scrolling and more.
Stars: ✭ 30 (-68.75%)
Mutual labels:  scroll
QuickTraceiOSLogger
A real time iOS log trace tool, view iOS log with pc web browser under local area network, which will automatically scroll like xcode. 一个实时的iOS日志跟踪工具，在局域网中使用 PC Web 浏览器查看 iOS 日志，它将像xcode一样自动滚动。
Stars: ✭ 16 (-83.33%)
Mutual labels:  scroll
vuejs-loadmore
A pull-down refresh and pull-up loadmore scroll component for Vue.js. Vue上拉加载下拉刷新组件
Stars: ✭ 62 (-35.42%)
Mutual labels:  scroll
react-is-scrolling
Simply detect if users are scrolling in your components in a declarative API
Stars: ✭ 17 (-82.29%)
Mutual labels:  scroll
JhScrollActionSheetView
JhScrollActionSheetView - UIcollectionView横向滚动,类似微博新版的详情页分享界面,可设置单排或双排显示,title不设置不显示title,如果想实现发送站内用户的功能,自己可以改一下代码
Stars: ✭ 13 (-86.46%)
Mutual labels:  scroll
any-scroll
🚀 模拟scrollview, 支持pc/移动端, 让实现Tab/Slider等组件轻而易举.
Stars: ✭ 45 (-53.12%)
Mutual labels:  scroll
vue-scrollwatch
scrollspy
Stars: ✭ 59 (-38.54%)
Mutual labels:  scroll
View All Similar Projects ➔

vue-scroll-progress 🎉

Simple Vue.js plugin for page scroll progress bar

vue2 Version Gzipsize Awesome License Hits stargazers

Live Demo

Installation

npm i vue-scroll-progress --save
yarn add vue-scroll-progress

CDNs

jsDelivr, UNPKG, bundle.run

Usage

main.js

// YourComponent.vue or main.js for global usage
import Vue from "vue";
import VueScrollProgress from "vue-scroll-progress";

Vue.use(VueScrollProgress);

Use in component

<!-- .vue template -->
<template>
  <VueScrollProgress></VueScrollProgress>
</template>

Set progress bar style, and customize as you want(Optional)

<style>
/* play with some lines below */
#progress-container-el {
  /* background */
  background-color: transparent !important;
  top: calc(100% - 4px) !important; /* remove if Vue 3.x */
}
#progress-el {
  /* progress bar */
  background-color: red !important;
}
</style>

Author

Hyouk Seo(Spemer)

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].