Slim Progress Bar Component For Vue 3

Install & Download:

# Yarn
$ yarn add @jambonn/vue-next-progressbar
# NPM
$ npm i @jambonn/vue-next-progressbar

Description:

A configurable and controllable slim progress bar component for Vue 3 applications.

How to use it:

1. Install the slim progress bar component.

// main.js
import { createApp } from 'vue';
import { createRouter, createWebHistory } from 'vue-router';
import VueNextProgressbar from '@jambonn/vue-next-progressbar';
import App from './App.vue';
const app = createApp(App);
app.use(createRouter({
    history: createWebHistory(),
    routes: [],
}));
app.use(VueNextProgressbar, { router: true });
app.mount('#app');

2. Use the slim progress bar in your component.

// app.vue
<template>
  <button type="button" @click="progressBar.start()">Show</button>
  <button type="button" @click="progressBar.done()">Complete</button>
</template>
<script>
import { getCurrentInstance, inject } from 'vue';
export default {
  setup() {
    // Get from global properties
    const app = getCurrentInstance();
    const progressBar = app.appContext.config.globalProperties.$Progressbar;
    // Get from provide
    const injectProgressBar = inject('Progressbar');
    return { progressBar, injectProgressBar }
  }
}
</script>

3. Set the animation speed. Default: 800ms.

app.use(VueNextProgressbar, {
  trickleSpeed: 500,
});

Preview:

Changelog:

v0.1.9 (03/20/2024)

• feat: add option skip first load

v0.1.8 (01/22/2024)

• feat: bump minimum node version to 18

v0.1.7 (01/11/2024)

• feat: bump minimum node version to 16

v0.1.6 (01/10/2024)

• fix(build): update extension for es format