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
Download Details:
Author: meloalright
Live Demo: https://meloalright.github.io/vue-ins-progress-bar/#/
Download Link: https://github.com/meloalright/vue-ins-progress-bar/archive/master.zip
Official Website: https://github.com/meloalright/vue-ins-progress-bar
Install & Download:
# NPM
$ npm install vue-ins-progress-bar --save