Awesome
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
Browsers Support
Modern browsers and Internet Explorer 9+ (IE9 purple)
Source
Repository: vue-ins-progress-bar
Contributors: contributors
Author: muzishuiji
Popularity
ChangeLog
Documented in Releases