# vue-scroll-progressbar

> Vue.js plugin for page scroll progress bar

Latest version **0.1.4** (published 2019-01-22) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install vue-scroll-progressbar
pnpm add vue-scroll-progressbar
yarn add vue-scroll-progressbar
bun add vue-scroll-progressbar
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.1.4 |
| Published | 2019-01-22 |
| First published | 2019-01-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 677.5 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | Guillaume Briday |
| Maintainers | guillaumebriday |

## Links

- npm: https://www.npmjs.com/package/vue-scroll-progressbar
- Homepage: https://github.com/guillaumebriday/vue-scroll-progressbar
- npm.io page: https://npm.io/package/vue-scroll-progressbar

## Dependencies (1)

- [vue](https://npm.io/package/vue.md) ^2.5.21

## Recent versions

- 0.1.4 (latest) — 2019-01-22
- 0.1.3 — 2019-01-22
- 0.1.2 — 2019-01-22
- 0.1.1 — 2019-01-21
- 0.1.0 — 2019-01-21

## README

# vue-scroll-progressbar

[![Donate](https://img.shields.io/badge/Donate-PayPal-green.svg)](https://www.paypal.me/guillaumebriday)
[![](https://img.shields.io/npm/dt/vue-scroll-progressbar.svg)](https://www.npmjs.com/package/vue-scroll-progressbar)
[![](https://img.shields.io/npm/v/vue-scroll-progressbar.svg)](https://www.npmjs.com/package/vue-scroll-progressbar)
[![](https://img.shields.io/github/license/guillaumebriday/vue-scroll-progressbar.svg)](https://github.com/guillaumebriday/vue-scroll-progressbar)

## Getting started

## Install

```bash
$ npm install vue-scroll-progressbar --save
```

or

```bash
$ yarn add vue-scroll-progressbar
```

Install the plugin into Vue:
```js
import Vue from 'vue'
import VueScrollProgressBar from 'vue-scroll-progressbar'

Vue.use(VueScrollProgressBar)
```

Or use the component directly:

```js
import Vue from 'vue'
import VueScrollProgressBar from 'vue-scroll-progressbar'

Vue.component("vue-scroll-progress-bar", VueScrollProgressBar)
```

## Basic Usage

```html
<template>
  <div id="app">
    <vue-scroll-progress-bar @complete="handleComplete" height="2rem" />
  </div>
</template>
```

## Props

|key|description|default|
|:---|---|---|
| `height`|Height of the progress bar|`'.5rem'`|
|`backgroundColor`|Background property of the progress bar|`'linear-gradient(to right, #38C172, #51D88A)'`|
|`barClass`|Class attribute of the progress bar|`'{}'`|
|`containerColor`|Background property of the progress bar container|`'transparent'`|
|`zIndex`|z-index property of the progress bar container|`'50'`|
|`containerClass`|Class attribute of the progress bar container|`'{"progress-bar-container--container": true}'`|

With :

```css
.progress-bar-container--container {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
}
```

`containerClass` must be used to override the `.progress-bar-container--container` default class. You can use the default `:class` syntax on the component to add classes if needed.

## Events

|key|description|
|:---|---|
| `begin`|When scroll reached 0%|
|`complete`|When scroll reached 100%|

## Develop

## Project setup
```
$ cd examples
$ yarn install
```

### Compiles and hot-reloads for development
```
$ yarn run serve
```

### Compiles and minifies for production
```
$ yarn run build
```

### Run your tests
```
$ yarn run test
```

### Lints and fixes files
```
$ yarn run lint
```

## Contributing

Do not hesitate to contribute to the project by adapting or adding features ! Bug reports or pull requests are welcome.

## License

This project is released under the [MIT](http://opensource.org/licenses/MIT) license.

---
_Source: https://npm.io/package/vue-scroll-progressbar · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._