UNPKG

2.35 kBMarkdownView Raw
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
20npm i vue-scroll-progress --save
21```
22
23```bash
24yarn 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
39import Vue from "vue";
40import VueScrollProgress from "vue-scroll-progress";
41
42Vue.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)