vue-ins-progress-bar is a component of Vue.js for creating dynamic Instagram-inspired progress bar/loading indicators for web applications.

instagram loader vuejs, swiper js progress bar, share to instagram story javascript, web dev stories, vue js progress bar example

Custom Progress Bar That Can Be Controlled As Angular Directive

How to make use of it:

Install and download:

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

1. Import and record 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. Plug options available.

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

Instagram Progress Bar, vue-ins-progress-bar Plugin/Github

See Demo And Download

Official Website(meloalright): Click Here

This superior jQuery/javascript plugin is developed by meloalright. For extra advanced usage, please go to the official website.