Secondary development based on vue-top-progress
- Vue.js
^2.0.0
$ npm install vue-load-progress<template>
<vue-load-progress ref="progress"></vue-load-progress>
</template>
<script>
import { VueLoadProgress } from 'vue-top-progress'
export default {
components: {
VueLoadProgress
},
mounted () {
this.$refs.progress.start()
// Use setTimeout for demo
setTimeout(() => {
this.$refs.progress.done()
}, 2000)
}
}
</script>// main.js
import Vue from 'vue'
import VueLoadProgress from 'vue-load-progress'
Vue.use(VueLoadProgress)
new Vue({
//...
})<template>
<vue-load-progress ref="progress"></vue-load-progress>
</template>
<script>
export default {
mounted () {
this.$refs.progress.start()
// Use setTimeout for demo
setTimeout(() => {
this.$refs.progress.done()
}, 2000)
}
}
</script>// test.js
import $loading from 'vue-load-progress'
$loading.height = 2
$loading.start()
setTimeout(() => {
$loading.done()
}, 2000)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