1 | # vue-scroll-progress 🎉
|
2 |
|
3 | > Simple Vue.js plugin for page scroll progress bar
|
4 |
|
5 | [![vue2](https://img.shields.io/badge/vue-2.x-brightgreen.svg)](https://vuejs.org/)
|
6 | [![Version](https://img.shields.io/npm/v/vue-scroll-progress.svg)](https://www.npmjs.com/package/vue-scroll-progress)
|
7 | [![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)
|
8 | [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/vuejs/awesome-vue#progress-bar)
|
9 | [![License](https://img.shields.io/npm/l/vue-scroll-progress.svg)](https://github.com/spemer/vue-scroll-progress)
|
10 | [![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)
|
11 | [![stargazers](https://img.shields.io/github/stars/spemer/vue-scroll-progress?style=social)](https://github.com/spemer/vue-scroll-progress)
|
12 |
|
13 | [Live Demo](https://spemer.github.io/vue-scroll-progress/)
|
14 |
|
15 | <img src="https://github.com/spemer/vue-scroll-progress/blob/master/docs/src/assets/vue-scroll-progress.gif?raw=true" height="25%" width="25%">
|
16 |
|
17 | ## Installation
|
18 |
|
19 | ```bash
|
20 | npm i vue-scroll-progress --save
|
21 | ```
|
22 |
|
23 | ```bash
|
24 | yarn add vue-scroll-progress
|
25 | ```
|
26 |
|
27 | ### CDNs
|
28 |
|
29 | [jsDelivr](https://cdn.jsdelivr.net/npm/vue-scroll-progress/),
|
30 | [UNPKG](https://unpkg.com/vue-scroll-progress/),
|
31 | [bundle.run](https://bundle.run/vue-scroll-progress)
|
32 |
|
33 | ## Usage
|
34 |
|
35 | ### main.js
|
36 |
|
37 | ```javascript
|
38 | // YourComponent.vue or main.js for global usage
|
39 | import Vue from "vue";
|
40 | import VueScrollProgress from "vue-scroll-progress";
|
41 |
|
42 | Vue.use(VueScrollProgress);
|
43 | ```
|
44 |
|
45 | ### Use in component
|
46 |
|
47 | ```html
|
48 | <!-- .vue template -->
|
49 | <template>
|
50 | <VueScrollProgress></VueScrollProgress>
|
51 | </template>
|
52 | ```
|
53 |
|
54 | ### Set progress bar style, and customize as you want(Optional)
|
55 |
|
56 | ```css
|
57 | <style>
|
58 | /* play with some lines below */
|
59 | #progress-container-el {
|
60 | /* background */
|
61 | background-color: transparent !important;
|
62 | top: calc(100% - 4px) !important; /* remove if Vue 3.x */
|
63 | }
|
64 | #progress-el {
|
65 | /* progress bar */
|
66 | background-color: red !important;
|
67 | }
|
68 | </style>
|
69 | ```
|
70 |
|
71 | ## Author
|
72 |
|
73 | [Hyouk Seo(Spemer)](https://github.com/spemer)
|