Gradient Progress Bar Component For Vue 3

Install & Download:

# NPM
$ npm i vue3-progress --save

Description:

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);