想在 vue 项目中拥有 instagram 那种绚丽的彩虹进度条? 不如试试这个
slogan
vue-ins-progress-bar
a vue component of ins-style progress bar
一款 ins 风格的 vue 进度条组件
Demo
Install
npm i vue-ins-progress-bar
Usage
main.js
import VueInsProgressBar from 'vue-ins-progress-bar'const options = { position: 'fixed', show: true, height: '3px'}
Vue.use(VueInsProgressBar, options)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>APIs
this.$insProgress.start() // start the loading
this.$insProgress.finish() // finish the loading
this.$insProgress.height(4) // resize the height of loading bar to 4px
Source
Repository: vue-ins-progress-bar
Author: @meloalright
License
作者：melo的微博
链接：https://www.jianshu.com/p/1a39893ed003