https://github.com/spemer/vue-scroll-progress

🎉 Page scroll progress bar component for @vuejs
https://github.com/spemer/vue-scroll-progress

javascript plugin progress-bar scroll vue vuejs web

Last synced: about 3 hours ago
JSON representation

🎉 Page scroll progress bar component for @vuejs

• Host: GitHub
• URL: https://github.com/spemer/vue-scroll-progress
• Owner: spemer
• License: mit
• Created: 2018-12-22T19:21:19.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2024-09-08T07:55:05.000Z (over 1 year ago)
• Last Synced: 2025-10-06T15:46:42.553Z (2 months ago)
• Topics: javascript, plugin, progress-bar, scroll, vue, vuejs, web
• Language: Shell
• Homepage: https://spemer.github.io/vue-scroll-progress/
• Size: 7.54 MB
• Stars: 101
• Watchers: 1
• Forks: 11
• Open Issues: 31
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-vue - vue-scroll-progress - Simple Vue.js plugin for page scroll progress bar (Components & Libraries / UI Components)
• fucking-awesome-vue - vue-scroll-progress - Simple Vue.js plugin for page scroll progress bar (Components & Libraries / UI Components)
• awesome-vue - vue-scroll-progress - Page scroll progress bar component for @vuejs ` 📝 3 months ago` (UI Components [🔝](#readme))
• awesome-vue - vue-scroll-progress ★4 - Simple Vue.js plugin for page scroll progress bar (UI Components / Loader)
• awesome-vue - vue-scroll-progress - Simple Vue.js plugin for page scroll progress bar (UI Components / Loader)
• awesome-vue - vue-scroll-progress - Simple Vue.js plugin for page scroll progress bar (Components & Libraries / UI Components)

README

          
# vue-scroll-progress 🎉

> Simple Vue.js plugin for page scroll progress bar

[![vue2](https://img.shields.io/badge/vue-2.x-brightgreen.svg)](https://vuejs.org/)

[![Version](https://img.shields.io/npm/v/vue-scroll-progress.svg)](https://www.npmjs.com/package/vue-scroll-progress)

[![Gzipsize](https://img.badgesize.io/spemer/vue-scroll-progress/master/src/vue-scroll-progress.js?compression=gzip)](https://www.npmjs.com/package/vue-scroll-progress)

[![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/vuejs/awesome-vue#progress-bar)

[![License](https://img.shields.io/npm/l/vue-scroll-progress.svg)](https://github.com/spemer/vue-scroll-progress)

[![Hits](https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Fgithub.com%2Fspemer%2Fvue-scroll-progress&count_bg=%2379C83D&title_bg=%23555555&icon=&icon_color=%23E7E7E7&title=hits&edge_flat=false)](https://github.com/spemer/vue-scroll-progress)

[![stargazers](https://img.shields.io/github/stars/spemer/vue-scroll-progress?style=social)](https://github.com/spemer/vue-scroll-progress)

[Live Demo](https://spemer.github.io/vue-scroll-progress/)



## Installation

```bash

npm i vue-scroll-progress --save

```

```bash

yarn add vue-scroll-progress

```

### CDNs

[jsDelivr](https://cdn.jsdelivr.net/npm/vue-scroll-progress/),

[UNPKG](https://unpkg.com/vue-scroll-progress/),

[bundle.run](https://bundle.run/vue-scroll-progress)

## Usage

### main.js

```javascript

// YourComponent.vue or main.js for global usage

import Vue from "vue";

import VueScrollProgress from "vue-scroll-progress";

Vue.use(VueScrollProgress);

```

### Use in component

```html

  

```

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

```css

/* 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;

}

```

## Author

[Hyouk Seo(Spemer)](https://github.com/spemer)