Want an Instagram-like rainbow progress bar on a Vue project? Why don’t you try this?

vue-ins-progress-bar

a vue component of ins-style progress bar

An INS style vUE progress bar component

Demo

Live Demo

Install

npm i vue-ins-progress-bar   
Copy the code

Usage

main.js

import VueInsProgressBar from 'vue-ins-progress-bar'

const options = {
  position: 'fixed'.show: true.height: '3px'
}

Vue.use(VueInsProgressBar, options)
Copy the code

App.vue

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

<script>
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()
    })
  }
}
</script>
Copy the code

APIs

this.$insProgress.start() // start the loading
Copy the code
this.$insProgress.finish() // finish the loading
Copy the code
this.$insProgress.height(4) // resize the height of loading bar to 4px
Copy the code

Source

Repository: vue-ins-progress-bar

Author: @meloalright

License

MIT