vue-progressbar

Table of Contents

* ___Demo___
* ___Requirements___
* ___Installation___
* ___Usage___
* ___Constructor Options___
* ___Implementation___
* ___vue-router___
* ___meta options___
* ___Methods___
* ___Examples___
* ___License___

Demo

___Demo___

Requirements

- Vue.js 1.x or 2.x

Installation

``bash

npm

$ npm install vue-progressbar

#yarn
$ yarn add vue-progressbar
`


Usage

main.js

`javascript
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%|false|true, true|

Implementation

App.vue
`html



`


vue-router


`js
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}}
]
}
}
}
]
`

$3

|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)
`html

`
---
Accessing the progress bar externally through the vue instance (e.g. axios interceptors)

main.js
`js
// main.js from Usage section

Vue.use(VueProgressBar, options)

export default new Vue({ // export the Vue instance
...App
}).$mount('#app')
`
api-axios.js
`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 instace to be imported in your app
``

License

The MIT License