Gradient Progress Bar Component For Vue 3

A beautiful, customizable progress (loading) bar component for Vue.js 3 applications.

How to use it:

1. Import and register the component.

import Vue3Progress from "vue3-progress";

createApp(App).use(Vue3Progress).mount("#app");

2. Add the progress bar component to the template.

<div id="app">
  <vue3-progress />
  <router-view />
</div>

export default {
  name: "App",
  created() {
    this.$progress.start();
    this.$router.beforeEach((to, from, next) => {
      this.$progress.start();
      next();
    });
    this.$router.afterEach((to, from) => {
      this.$progress.finish();
    });
  },
};

3. Config the progress bar.

const options = {
  position: "fixed",
  height: "5px",
  color: "<Your Color>",
};
createApp(App).use(Vue3Progress, options)

4. API methods.

// start the progress bar
this.$progress.start();

// end the progress bar
this.$progress.finish();

// set the height of the progress bar
this.$progress.height(4);

Preview:

Download Details:

Author: tangyouge

Live Demo: https://vue3-progress.netlify.app/

Download Link: https://github.com/tangyouge/vue3-progress/archive/refs/heads/main.zip

Official Website: https://github.com/tangyouge/vue3-progress

Install & Download:

# NPM
$ npm i vue3-progress --save