https://github.com/ajerez/vue-read-progress

Customizable progress bar at the top of the page that shows the scroll progress
https://github.com/ajerez/vue-read-progress

read-progress scroll scroll-progress-bar scrollprogress vue vuejs

Last synced: 5 months ago
JSON representation

Customizable progress bar at the top of the page that shows the scroll progress

• Host: GitHub
• URL: https://github.com/ajerez/vue-read-progress
• Owner: ajerez
• License: mit
• Created: 2019-03-24T20:34:24.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2023-01-03T18:28:02.000Z (over 3 years ago)
• Last Synced: 2025-10-10T02:39:44.433Z (8 months ago)
• Topics: read-progress, scroll, scroll-progress-bar, scrollprogress, vue, vuejs
• Language: Vue
• Homepage: https://ajerez.github.io/vue-read-progress/
• Size: 2.55 MB
• Stars: 38
• Watchers: 1
• Forks: 0
• Open Issues: 19
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-vue - vue-read-progress - Customizable progress bar at the top of the page that shows the scroll progress ` 📝 2 years ago` (UI Components [🔝](#readme))
• awesome-vue - vue-read-progress - Customizable progress bar at the top of the page that shows the scroll progress (UI Components / Loader)
• awesome-vue - vue-read-progress - Customizable progress bar at the top of the page that shows the scroll progress (Components & Libraries / UI Components)

README

          
# vue-read-progress

Vue.js plugin for scroll position with a progress bar indicator

[![NPM version](https://badgen.net/npm/v/vue-read-progress?color=blue)](https://npmjs.com/package/vue-read-progress) [![NPM downloads](https://badgen.net/npm/dm/vue-read-progress?color=blue)](https://npmjs.com/package/vue-read-progress) [![Size](https://img.shields.io/bundlephobia/minzip/vue-read-progress.svg)](https://bundlephobia.com/result?p=vue-read-progress) [![twitter](https://img.shields.io/static/v1.svg?label=twitter&message=follow&color=blue)](https://twitter.com/alberto_jrz) [![donate](https://badgen.net/badge/support%20me/donate/?color=blue)](https://ko-fi.com/ajerez)

## Demo

https://ajerez.github.io/vue-read-progress/

## Installation

#### With npm (Recommended)

```bash

npm i vue-read-progress

```

#### yarn

```bash

yarn add vue-read-progress

```

## Usage

#### Default style

```vue

  

  

  import VueReadProgress from "vue-read-progress";

  export default {

    components: {

      VueReadProgress

    }

  };

```

#### Customizing the Look and Feel

```vue

  

  

  import VueReadProgress from "vue-read-progress";

  export default {

    components: {

      VueReadProgress

    }

  };

```

#### Gridsome (SSR) (https://gridsome.org/)

```vue

  

    

  

  

  export default {

    components: {

      ReadProgress: () =>

        import ('vue-read-progress')

        .then(m => m.default)

        .catch()

    }

  };

```

## Available Options (All optional)

| Property | Type   | Default value | Prop Description                       |

|----------|--------|---------------|-----------------------------------|

| height  | String | 4px           | Height of progress bar (optional)       |

| color   | String | #506888       | Color of progress bar (optional) |

| opacity | [String, Number] | 1   | Set opacity values from 0 to 1 (optional)          |

| shadow  | Boolean | false        | Enable box-shadow for the progress bar (optional)   |

## License

This project is licensed under the terms of the MIT license