Instagram Progress Bar For Vue.js

Install & Download:

# NPM
$ npm install vue-ins-progress-bar --save

Description:

A Vue.js component to create dynamic Instagram-inspired progress bar/loading indicators for web apps.

How to use it:

1. Import and register the Instagram progress bar.

import VueInsProgressBar from 'vue-ins-progress-bar'
const options = {
  // options here
}
Vue.use(VueInsProgressBar, options)

2. Add the component to the template.

<template>
  <div id="app">
    <router-view/>
    <vue-ins-progress-bar></vue-ins-progress-bar>
  </div>
</template>

// app.vue
export default {
  name: 'App',
  mounted () {
    this.$insProgress.finish()
  },
  created () {
    this.$insProgress.start()
    this.$router.beforeEach((to, from, next) => {
      this.$insProgress.start()
      next()
    })
    this.$router.afterEach((to, from) => {
      this.$insProgress.finish()
    })
  }
}

3. Available component options.

const options = {
  show: false,
  __isDisplay: false,
  position: 'fixed',
  height: '3px'
}

Preview:

Changelog:

02/01/2023

• v1.3.9