VueJS Examples

Best VueJS Scroll ProgressBar Components

A curated list of the best VueJS Scroll ProgressBar components.

1. vue-read-progress

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

Step 1: Installation

With npm (Recommended)

npm i vue-read-progress

yarn

yarn add vue-read-progress

Step 2: Usage

Default style

<template>
  <vue-read-progress></vue-read-progress>
  <!-- Your page content -->
</template>

<script>
  import VueReadProgress from "vue-read-progress";

  export default {
    components: {
      VueReadProgress
    }
  };
</script>

Customizing the Look and Feel

<template>
  <vue-read-progress color="#32AAEA" opacity="0.5" height="10px" :shadow="true"></vue-read-progress>
  <!-- Your page content -->
</template>

<script>
  import VueReadProgress from "vue-read-progress";

  export default {
    components: {
      VueReadProgress
    }
  };
</script>

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

<template>
  <ClientOnly>
    <read-progress></read-progress>
  </ClientOnly>
  <!-- Your page content -->
</template>

<script>
  export default {
    components: {
      ReadProgress: () =>
        import ('vue-read-progress')
        .then(m => m.default)
        .catch()
    }
  };
</script>

Read more


2. vue-top-progress

Yet another top progress loading bar component for Vue.js.

Requirements:

Step 1: Installation

$ npm install vue-top-progress

Here is a Demo

Step 2: Usage

<template>
  <vue-topprogress ref="topProgress"></vue-topprogress>
</template>

<script>
import vueTopprogress from 'vue-top-progress'

Vue.use(vueTopprogress)

// or

import { vueTopprogress } from 'vue-top-progress'

export default {
  mounted () {
    this.$refs.topProgress.start()

    // Use setTimeout for demo
    setTimeout(() => {
      this.$refs.topProgress.done()
    }, 2000)
  },

  components: {
    vueTopprogress
  }
}
</script>

Read more


3. vue-scroll-progress-bar

vue-scroll-progress-bar.

To get started:

Step 1: Install

$ npm install @guillaumebriday/vue-scroll-progress-bar --save

or

$ yarn add @guillaumebriday/vue-scroll-progress-bar

Step 2: Import

Install the plugin into Vue:

import Vue from 'vue'
import VueScrollProgressBar from '@guillaumebriday/vue-scroll-progress-bar'

Vue.use(VueScrollProgressBar)

Or use the component directly:

import { VueScrollProgressBar } from '@guillaumebriday/vue-scroll-progress-bar'

export default {
  components: {
    VueScrollProgressBar
  },

  // ...
}

Step 3: Basic Usage

<template>
  <vue-scroll-progress-bar @complete="handleComplete" height="2rem" />
</template>

Read more


4. vue-progress-scroll

Tiny Vue plugin to show a progress bar while user is reading an article or ...

Step 1: Installation

Get it from npm:

npm i -D vue-progress-scroll

Step 2: Import it

And use this inside your app:

import Vue from 'vue'
import App from './App.vue'
import Progress from 'vue-progress-scroll'

Vue.use(Progress);
new Vue({
  el: '#app',
  render: h => h(App)
})

And if you want to use from browser, simply :

<script src='./vue-progress-scroll.js'></script>

Step 3: Usage

Usage is really simple, just put the content inside progress-scroll tag.

Example:

<progress-scroll>
    Here is the article main part.
    lorem...
    ....
    ...
    ..
</progress-scroll>

Read more


5. vuejs-content-scroll-progress

Scrol indicator for vue.js apps.

See DEMO here

Step 1: Install

Run:

npm install vue-content-scroll-progress --save

Step 2: Usage

Add in the component import MyScrollPugin from 'vue-content-scroll-progress';

Add tag <content-scroll-progress spy=".content-list"><content-scroll-progress>

  • spy is a required parameter; pass it a selector of the scrolled container element
  • color, optional; e.g. "#ffcc00" - color of the indicator
  • extraClass, optional; e.g. "someclass" - add more complicated styling on the progress bar

Read more


6. vue-scroll-progress

Simple Vue.js plugin for page scroll progress bar

Live Demo

Step 1: Installation

npm i vue-scroll-progress --save
yarn add vue-scroll-progress

CDNs

jsDelivr,
UNPKG,
bundle.run

Step 2: Usage

main.js

// YourComponent.vue or main.js for global usage
import Vue from "vue";
import VueScrollProgress from "vue-scroll-progress";

Vue.use(VueScrollProgress);

Use in component

<!-- .vue template -->
<template>
  <VueScrollProgress></VueScrollProgress>
</template>

Set progress bar style, and customize as you want(Optional)

<style>
/* play with some lines below */
#progress-container-el {
  /* background */
  background-color: transparent !important;
  top: calc(100% - 4px) !important; /* remove if Vue 3.x */
}
#progress-el {
  /* progress bar */
  background-color: red !important;
}
</style>

Read more


7. vue-snakke

Vue Snakke allows you to add a reading progress bar to your Vue 3 project.

Vue Snakke example

Step 1: Install

npm install vue-snakke

Step 2: Usage

Add the following import to your setup function:

import { useSnakke } from 'vue-snakke';

const { progress } = useSnakke();

progress is a Ref value (from 0 to 1) that will automatically update whenever the page is scrolled. You can use it to indicate page progress.

Read more


Related Posts