vueprogressionbar
Advanced tools
Comparing version 0.1.0 to 0.1.1
{ | ||
"name": "vueprogressionbar", | ||
"version": "0.1.0", | ||
"version": "0.1.1", | ||
"main": "dist/ProgressBar.umd.js", | ||
@@ -5,0 +5,0 @@ "module": "dist/ProgressBar.esm.js", |
@@ -1,24 +0,54 @@ | ||
# progressionbar | ||
# Vue Progression Bar | ||
## Project setup | ||
Progression bar shows how much the user scrolled (progressed) from the beginning of the page. | ||
### Installation | ||
To install this package, use npm: | ||
``` | ||
npm install | ||
npm i vueprogressionbar --save | ||
``` | ||
### Usage | ||
### Compiles and hot-reloads for development | ||
Default example: | ||
``` | ||
npm run serve | ||
``` | ||
<template> | ||
<div id="app"> | ||
<ProgressBar/> | ||
</div> | ||
</template> | ||
### Compiles and minifies for production | ||
<script> | ||
import ProgressBar from 'vueprogressionbar' | ||
export default { | ||
name: 'App', | ||
components: { | ||
ProgressBar | ||
} | ||
} | ||
</script> | ||
``` | ||
npm run build | ||
### Options | ||
There are 3 options you can chose from: | ||
Option 1: rounded - rounded bar edges (false by default) ![Imgur](https://imgur.com/QtBrtJ0.png) | ||
``` | ||
### Lints and fixes files | ||
<ProgressBar rounded/> | ||
``` | ||
npm run lint | ||
Option 2: size (medium by default): | ||
``` | ||
<ProgressBar size="[small-big]"/> | ||
``` | ||
small (5px height) ![img](https://imgur.com/IP9ezNU.png) | ||
medium (7px) ![img](https://imgur.com/9kNqOqB.png) | ||
big (10px) ![img](https://imgur.com/Fs9nfbU.png) | ||
### Customize configuration | ||
See [Configuration Reference](https://cli.vuejs.org/config/). | ||
Option 3: color. (blueish by default - #76ceff) | ||
Ex: | ||
``` | ||
<ProgressBar color="red"/> | ||
``` | ||
### Gif example | ||
![gif](https://media.giphy.com/media/QvetFy5WqoWuuZPQzY/giphy.gif) |
22458
54