Awesome
vue-top-progress 
Yet another top progress loading bar component for Vue.js.
Requirements
- Vue.js
^2.0.0
Installation
$ npm install vue-top-progress
Demo
Usage
<template>
<vue-topprogress ref="topProgress"></vue-topprogress>
</template>
<script>
import vueTopprogress from 'vue-top-progress'
Vue.use(vueTopprogress)
// or
import { vueTopprogress } from 'vue-top-progress'
export default {
mounted () {
this.$refs.topProgress.start()
// Use setTimeout for demo
setTimeout(() => {
this.$refs.topProgress.done()
}, 2000)
},
components: {
vueTopprogress
}
}
</script>
Props
speed
Transition speed, in ms. Default: 350
easing
Transition function. Default: linear
color
Color of progress bar. Default: #29d
colorShadow
Shadow of progress bar. If omitted, will use progress bar color.
errorColor
Color of progress bar when status is error. Default: #f44336
height
Height of progress bar. Default: 3
trickle
Turn off the automatic incrementing behavior by setting this to false. Default: true
trickleSpeed
How often to trickle, in ms. Default: 250
minimum
Minimum percentage used upon starting. Default: 0.8
maximum
By default behavior, when progress start, it will never get to 100% until done or fail to be called. Setting this to adjust maximum percentage. Default: 97.5
zIndex
The z-index of component. Default: 9999