vue-progressbar
Table of Contents
- Demo
- Requirements
- Installation
- Usage
- Constructor Options
- Implementation
- vue-router
- Methods
- Examples
- License
Demo
Requirements
- Vue.js
1.xor2.x
Installation
# npm
$ npm install vue-progressbar
#yarn
$ yarn add vue-progressbar
Usage
main.js
import Vue from 'vue'
import VueProgressBar from 'vue-progressbar'
import App from './App'
const options = {
color: '#bffaf3',
failedColor: '#874b4b',
thickness: '5px',
transition: {
speed: '0.2s',
opacity: '0.6s',
termination: 300
},
autoRevert: true,
location: 'left',
inverse: false
}
Vue.use(VueProgressBar, options)
new Vue({
...App
}).$mount('#app')
Constructor Options
| key | description | default | options |
|---|---|---|---|
color |
color of the progress bar | 'rgb(143, 255, 199)' |
RGB HEX HSL HSV VEC |
failedColor |
color of the progress bar upon load fail | 'red' |
RGB, HEX, HSL, HSV, VEC |
thickness |
thickness of the progress bar | '2px' |
px, em, pt, %, vh, vw |
transition |
transition speed/opacity/termination of the progress bar | {speed: '0.2s', opacity: '0.6s', termination: 300} |
speed, opacity, termination |
autoRevert |
will temporary color changes automatically revert upon completion or fail | true |
true, false |
location |
change the location of the progress bar | top |
left, right, top, bottom |
position |
change the position of the progress bar | fixed |
relative, absolute, fixed |
inverse |
inverse the direction of the progress bar | false |
true, false |
autoFinish |
allow the progress bar to finish automatically when it is close to 100% | true |
true, false |
Implementation
App.vue
<template>
<div id="app">
<!-- for example router view -->
<router-view></router-view>
<!-- set progressbar -->
<vue-progress-bar></vue-progress-bar>
</div>
</template>
<script>
export default {
mounted () {
// [App.vue specific] When App.vue is finish loading finish the progress bar
this.$Progress.finish()
},
created () {
// [App.vue specific] When App.vue is first loaded start the progress bar
this.$Progress.start()
// hook the progress bar to start before we move router-view
this.$router.beforeEach((to, from, next) => {
// does the page we want to go to have a meta.progress object
if (to.meta.progress !== undefined) {
let meta = to.meta.progress
// parse meta tags
this.$Progress.parseMeta(meta)
}
// start the progress bar
this.$Progress.start()
// continue to next page
next()
})
// hook the progress bar to finish after we've finished moving router-view
this.$router.afterEach((to, from) => {
// finish the progress bar
this.$Progress.finish()
})
}
}
</script>
vue-router
export default [
{
path: '/achievement',
name: 'achievement',
component: './components/Achievement.vue',
meta: {
progress: {
func: [
{call: 'color', modifier: 'temp', argument: '#ffb000'},
{call: 'fail', modifier: 'temp', argument: '#6e0000'},
{call: 'location', modifier: 'temp', argument: 'top'},
{call: 'transition', modifier: 'temp', argument: {speed: '1.5s', opacity: '0.6s', termination: 400}}
]
}
}
}
]
vue-router meta options
| call | modifier | argument | example |
|---|---|---|---|
| color | set, temp |
string |
{call: 'color', modifier: 'temp', argument: '#ffb000'} |
| fail | set, temp |
string |
{call: 'fail', modifier: 'temp', argument: '#ffb000'} |
| location | set, temp |
string |
{call: 'location', modifier: 'temp', argument: 'top'} |
| transition | set, temp |
object |
{call: 'transition', modifier: 'temp', argument: {speed: '0.6s', opacity: '0.6s', termination: 400}} |
Methods
| function | description | parameters | example |
|---|---|---|---|
| start | start the progress bar loading | N/A |
this.$Progress.start() |
| finish | finish the progress bar loading | N/A |
this.$Progress.finish() |
| fail | cause the progress bar to end and fail | N/A |
this.$Progress.fail() |
| increase | increase the progress bar by a certain % | number: integer |
this.$Progress.increase(number) |
| decrease | decrease the progress bar by a certain % | number: integer |
this.$Progress.decrease(number) |
| set | set the progress bar % | number: integer |
this.$Progress.set(number) |
| setFailColor | cause the fail color to permanently change | color: string |
this.$Progress.setFailColor(color) |
| setColor | cause the progress color to permanently change | color: string |
this.$Progress.setColor(color) |
| setLocation | cause the progress bar location to permanently change | location: string |
this.$Progress.setLocation(location) |
| setTransition | cause the progress bar transition speed/opacity/termination to permanently change | transition: object |
this.$Progress.setTransition(transition) |
| tempFailColor | cause the fail color to change (temporarily) | color: string |
this.$Progress.tempFailColor(color) |
| tempColor | cause the progress color to change (temporarily) | color: string |
this.$Progress.tempColor(color) |
| tempLocation | cause the progress bar location to change (temporarily) | location: string |
this.$Progress.tempLocation(location) |
| tempTransition | cause the progress bar location to change (temporarily) | transition: object |
this.$Progress.tempTransition(transition) |
| revertColor | cause the temporarily set progress color to revert back to it's previous color | N/A |
this.$Progress.revertColor() |
| revertFailColor | cause the temporarily set fail color to revert back to it's previous color | N/A |
this.$Progress.revertFailColor() |
| revertTransition | cause the temporarily set transition to revert back to it's previous state | N/A |
this.$Progress.revertTransition() |
| revert | cause the temporarily set progress and/or fail color to their previous colors | N/A |
this.$Progress.revert() |
| parseMeta | parses progress meta data | meta: object |
this.$Progress.parseMeta(meta) |
Examples
Loading Data (vue-resource)
<script>
export default {
methods: {
test () {
this.$Progress.start()
this.$http.jsonp('http://api.rottentomatoes.com/api/public/v1.0/lists/movies/in_theaters.json?apikey=7waqfqbprs7pajbz28mqf6vz')
.then((response) => {
this.$Progress.finish()
}, (response) => {
this.$Progress.fail()
})
}
}
}
</script>
Accessing the progress bar externally through the vue instance (e.g. axios interceptors)
main.js
// main.js from Usage section
Vue.use(VueProgressBar, options)
export default new Vue({ // export the Vue instance
...App
}).$mount('#app')
api-axios.js
import axios from 'axios';
import app from '../main'; // import the instance
const instance = axios.create({
baseURL: '/api'
});
instance.interceptors.request.use(config => {
app.$Progress.start(); // for every request start the progress
return config;
});
instance.interceptors.response.use(response => {
app.$Progress.finish(); // finish when a response is received
return response;
});
export default instance; // export axios instance to be imported in your app
